吐槽啦：Yeah 明天就是国庆了o(*￣▽￣*)o！哈哈，提前祝福各位园友国庆快乐、假期愉快、生活美满、天天开心！国庆我要回家一趟，把一些不用的东西带回家，走访一下亲朋好友，在家打几天酱油~~~
言归正传，我们回到我们的主题来看看CSS之全屏背景图。Nowdays，满屏大图的网页成为了一种fashion，网页的模板、布局是用CSS、HTML……来设计的，这里就以CSS来聊全屏背景图。
简单点，对于全屏背景图，我们只需用CSS的一个background-size属性就可以了。
当background-size的值为cover时，浏览器会自动按比例缩放背景图的宽和高，直到大于或等于viewport的宽和高。
Syntas语法：
body {
/* 加载背景图 */
background-image: url(/cnblogs_com/caidupingblogs/828701/o_5_11911_8.jpg);
/* 背景图垂直、水平均居中 */
background-position: center center;
/* 背景图不平铺 */
background-repeat: no-repeat;
/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
background-attachment: fixed;
/* 让背景图基于容器大小伸缩 */
background-size: cover;
/* 设置背景颜色，背景图加载过程中会显示背景色 */
background-color: #FF0000;
}
在这里需要注意的一点就是：如果背景图小于body标签的尺寸(例如在高分辨率显示器上，或页面内容特别多时)，浏览器会拉伸图片。我们都知道，当把一个图片拉伸时，图片会变模糊。
因此，在选择背景图时，要特别注意尺寸。
还有一个问题就是在其他媒体设备上查看，在不同的屏幕上查看是不一样的，所以我们要将max-width: 600px设为断点，也就是说当浏览器viewport大于600px时，会使用大背景图，反之使用小背景图。下面是媒体查询方法：
@media only screen and (max-width: 600px) {
body {
background-image: url(/cnblogs_com/caidupingblogs/828701/o_5_11911_8.jpg);
}
}
我们设置background为fixed和center，再使用background-size来适应大小:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
css设置全屏背景图，background-size 属性
在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕,不留空白区域 保持图像的纵横比(图片不变形) 图片居中 不出现滚动条 多浏览器支持 ...
CSS实现响应式全屏背景图
body { /* 加载背景图 */ background-image: url(images/background-photo.jpg); /* 背景图垂直.水平均居中 */ background- ...
全屏背景图的实现及background的相关属性
今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的: (图一) ...
一个酷炫的，基于HTML5,Jquery和Css的全屏焦点图特效，兼容各种浏览器
基于HTML5和CSS的焦点图特效,梅花图案的背景很有中国特色,而且还会动哦,效果超炫,推荐下载! 演示图 html代码 /p>
unity中全屏背景图缩放
using UnityEngine; using System.Collections; public class BgPicScript : MonoBehaviour { // Use this ...
css 设置全屏背景图片
div#div1{ position: ...
CSS之生成全屏背景图片
在CSS中背景图片的填充方法: background-position:x,y(背景图片x,y轴的定位) background-repeat:no-repeat(不平铺) background-rep ...
HTML5全屏背景视频与 CSS 和 JS(插件或库)
译文原链接:http://codetheory.in/html5-fullscreen-background-video/ 前言: 当网页载入时,自动播放的全屏背景视频已经成为当前颇受欢迎的趋势. 就 ...
css3全屏背景图片切换特效
效果体验:/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...
随机推荐
python获取命令行输出结果
#coding=utf-8 import os command = 'ping '#可以直接在命令行中执行的命令 r = os.popen(command)#执行该 ...
jQuery对象与dom对象的转换
一直以来对于通过jQuery方式获取的对象使不能直接使用JavaScript的一些方法的,开始的时候不理解,现在此案知道,原来jQuery获得的对象并不和我们平时使用getElementById获得的 ...
media type和media query
media type media type是CSS2的重要属性,通过它,可以针对不同的设备指定不同的样式. media type种类: 用法:
ReactNative系列组件用法(一)
首先我们来认识view 改变一些特性,再来看看项目的变化 我们新增flex布局的一些属性,再来看看项目的变化 接下来我们来看看如果获取屏幕的分辨率 关于图片的用法,reactNative这里也是很神奇 ...
Python数据分析入门之pandas基础总结
Pandas--"大熊猫"基础 Series Series: pandas的长枪(数据表中的一列或一行,观测向量,一维数组...) Series1 = pd.Series(np.r ...
dashboard and reporting Interface analysis
dashboard and reporting Interface analysis > show system show system backup show system counters ...
