1.指定渐变背景的大小
.div {
background: url(../img/1.jpg);
/*background-size:contain;*/
width: 500px;
height: 100px;
}
.divOne {
width: 100%;
height: 100%;
border: 1px solid red;
/*渐变，支持背景的大小和重复*/
background: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8));
background-size: 100px 100px;
}
2.测试渐变背景的动画效果：
结果证明在动画中渐变背景会立刻改变。
.div {
background: url(../img/1.jpg);
/*background-size:contain;*/
width: 500px;
height: 100px;
}
.divOne {
width: 100%;
height: 100%;
border: 1px solid red;
background: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8));
transition: all linear 1s;
-webkit-transition: all linear 1s;
}
.divOne:hover {
/*width:600px;*/
/*动画，对背景渐变不起作用*/
background: repeating-linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.2));
}
3.仿照图片，实现背景的模糊化处理：
背景图：
.div {
width: 500px;
height: 100px;
background: url(../img/1.jpg) repeat;
background-size: contain;
margin-bottom: 20px;
position: relative;
}
.divUp {
width: 100%;
height: 100%;
background: url(../img/bg_ie.png);
}
.divUp2 {
width: 100%;
height: 100%;
background: repeating-linear-gradient(to right, rgba(191, 191, 191, 0.7),
rgba(145, 152, 174, 0.75),
rgba(163, 163, 163, 0.8));
background-size:650px auto;
}
.mask {
width: 100%;
height: 100%;
background: #10141d;
opacity: 0.25;
position: absolute;
top: 0px;
left: 0px;
}
显示结果：
更多：