看了很多图片上添加透明度的文章，大部分都是围绕
opacity：
这个属性来做的，但是实际项目中，该效果会影响到图片里面的字段，或者是
-webkit-mask：
这个需要配合渐变或者其他来实现，而且以白色半透明为主。如果我们需要的是黑色半透明呢，以下是我个人的的一些写法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.list-detail{
width: 750px;
height: 420px;
position: relative;
}
.list-detail .black{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0,0,0,0.3);
}
img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="content listA">
<div class="list-detail">
<div class="black"></div>
<img src="../../../images/scene.jpg" alt="" />
<div class="pointB">
<p class="tit">圣诞狂欢夜</p>
<p class="title">体验幸福的味道，享受美的时光</p>
</div>
<div class="pointC">
征集期：2017.6.8截止
</div>
</div>
</div>
</body>
</html>
效果图如下：
图片上已有黑色30%的透明度，而且文字不受影响
时间： 2024-10-09 21:48:03