1.
设置背景颜色：
eg：background-color:green,这个时候背景颜色为深绿色，如果要想让颜色浅一点，一个办法是改变颜色的名称，还有一个办法是改变透明度background-color:rgba(0,255,0,0.1),透明度从0到1,0表示全透明，1表示不透明，其余为中间值。
设置背景图片：
background-image:url(图片路径),
设置背景图片是否平铺：
background-repeat:repeat这是平铺，即一个背景中有多个重复的图片，按规律排布
background-repeat:no-repeat,不平铺，背景中只有一个图片
设置背景图片的位置：
eg:background-position:center center,代表的是水平居中，这个前面值代表水平方向，分别为left(左)，center（中间），right（右），后面代表数值方向，分别为top(上部)，center（中间），bottom（底部）
设置背景是否跟着文字动的效果：
background-attachment：fixed,代表的是固定背景图不动，只有文字在上下滑动时运动。
使背景铺满整个容器：
background-size:cover
2.css视觉差案例
下一张照片滑动时候，会将上一张照片覆盖掉
案例：
源代码：
html:
<link rel="stylesheet" href="./case-4.css">
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
css:
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
div {
height: 100%;
}
.box1 {
background: red;
background-image: url(./picture/bg1.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.box2 {
background: green;
background: url(./picture/bg2.jpg) no-repeat 0px 0px/cover fixed;
}
.box3 {
background: yellow;
background: url(./picture/bg3.jpg)0px 0px/cover fixed;
}
140
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
