问题: CSS实现背景图片全屏铺满自适应的方式
解决:
(1)background-image:可添加多张背景图片。
参数:url() || none(默认)
background-image: url(images/scroll_top.jpg),
url(images/scroll_bottom.jpg),
url(images/scroll_middle.jpg);
注意:背景图不占位置(不受padding的影响),
img插入图片才占位且有4像素的距离,即背景图不能撑出高度。4像素的距离用 vertical-align清除
(2)background-size:背景图片的大小
参数:百分比 || 精确值 || auto(默认) || cover || contain
auto:背景图像的真实大小。
cover:将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
图片边缘距父元素边框中最远边等比例放大
contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等。
背景图像始终被包含在容器内。
图片边缘距父元素边框中最近边等比例放大
注意:
1、一般只设置一个值(宽度),高度就等比例缩放,这样不变形
background-size:100% (宽度100% 高度自适应)
2、用于调整背景图像是否完整显示
(3)background-position复合属性:背景图像位置
( background-position-x , background-position-y)
参数:x坐标和y坐标,可以使用**方位名词**和**精确单位**
【1】方位:top,center,bottom,left,center,right
1、两个值都是方位名词,两个值前后顺序无关。
background-position:left center
background-position:center
【2】精确单位:百分数或由浮点数字和单位标识符组成的长度值(表示与容器边缘的偏移量)
1、超出父级盒子部分隐藏
2、如:20px 50px表示:以图片左上角为基准,向右偏移20px,向下偏移50px
【3】注意:
1、如果只指定一个值,则表示横坐标,纵坐标将默认为50%(居中对齐)
2、如果指定的两个值是精确单位和方位名词混合使用,则第一个值是x坐标,第二个值是y坐标
3、该属性定位不受对象的补丁属性(padding)设置影响
4、默认值为:(0% 0%),即图片定位于对象不包括补丁(padding)的内容区域左上角
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b7695bc22d5180bc5e9436ca00710c1e.png)
【4】例如:backgroun-position:50% 50% 水平和垂直居中
backgroun-position:center center
backgroun-position-x:left 30px (向右便宜30px)
center:50% left top =0% right bottom=100%
(4)background-repeat: 背景图像的平铺
参数:repeat(默认) || no-repeat || repeat-x || repeat-y
(5)background-attachment:背景图像是否固定或者随着页面的其余部分滚动
参数:scroll || fixed
scroll :背景图像是随着对象内容滚动
fixed:背景图像固定
(6)background-color: 背景颜色
参数:transparent(默认) || color
背景半透明是指盒子背景半透明,盒子里面的内容不受影响
(7)background-origin:背景图像的位置
border-box :背景图片从边框的左上角开始
padding-box (默认):背景图像从填充边缘的左上角开始
content-box -:背景图片从内容的左上角开始
(8)**background:背景复合写法**
background: 背景颜色 背景图像地址 背景平铺 背景图像滚动 背景图片位置;
- 方法一:
margin:0px;
background: url(images/bg.png) no-repeat;
background-size:100% 100%;
background-attachment:fixed;
- 方法二
background: url("bg.png") no-repeat;
height:100%;
width:100%;
overflow: hidden;
background-size:cover;//或者background-size:100%;
- 方法三
body {
background-image: url(images/bg.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}