首页 > 代码库 > 图片添加透明度蒙版

图片添加透明度蒙版

2024-10-16 01:56:01   215人阅读

看了很多图片上添加透明度的文章，大部分都是围绕

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%的透明度，而且文字不受影响

图片添加透明度蒙版


联系
我们