使用
background-image: linear-gradient
实现渐变背景效果
- css语法
background-image: linear-gradient (
颜色1,
颜色2
)
效果
css样式
.box {
width: 300px;
height: 200px;
background-image: linear-gradient(
transparent,
rgba(0,0,0,0.5)
);
渐变案例
- css部分
<style>
.box {
position: relative;
}
.box img {
width: 300px;
}
.box .title {
position: absolute;
left: 15px;
bottom: 20px;
/* 定位元素的层级 */
z-index: 2;
width: 260px;
color: #fff;
font-size: 20px;
font-weight: 700;
}
.box .mask {
position: absolute;
left: 0px;
top: 0px;
width: 300px;
height: 199.96px;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.5)
);
/* 隐藏元素 */
opacity: 0;
transition: all 1s;
}
.box:hover .mask {
opacity: 1;
}
</style>
- html部分
<div class="box">
<img src="../image/1.jpg" alt="">
<div class="title">照片的意义在于把瞬间变成永恒</div>
<div class="mask"></div>
</div>