使用background-image属性添加渐变背景效果
基本写法:
background-image: linear-gradient ( 颜色1, 颜色2, ..... );
透明渐变:
background-image: linear-gradient ( transparent, rgba(0,0,0,.6) );
半透明渐变:
透明:transparent-rgba()
效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变背景</title>
<style>
.box {
width: 300px;
height: 200px;
background-color: #fff;
background-image: linear-gradient(#ffff,pink,green);
background-image: linear-gradient(
transparent,
rgba(0,0,0,.5)
);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>小案例:
实现鼠标悬停半透明渐变及文字上移效果
效果展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>产品效果</title>
<style>
.box {
position: relative;
width: 300px;
height: 212px;
}
.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: 0;
top: 0;
width: 300px;
height: 212px;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.5)
);
opacity: 0;
transition: all 1s;
}
.box:hover .mask {
opacity: 1;
}
</style>
</head>
<body>
<div class="box">
<img src="./images/product.jpeg" alt="">
<div class="title">OceanStor Pacific 海量存储斩获2021 Interop金奖</div>
<div class="mask"></div>
</div>
</body>
</html>
