CSS3为图片增加蒙版

最新推荐文章于 2025-05-15 16:07:01 发布

原创最新推荐文章于 2025-05-15 16:07:01 发布 · 8.2k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍如何利用CSS3的mask属性为图片添加蒙版，通过创建透明和不透明区域，实现图片的遮罩效果，从而增强网页设计的视觉表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML代码

<div class="item-02-bot circle-border">
    <div class="img-container">
        <img  src="../static/images/1.jpg" alt=""/>
        <div class="img-textbox">
            <p class='img-text'>青少年口语</p>    //蒙版上的文字
        </div>
    </div>
    <div class="img-header">
        <h3><a href="">青少年口语</a></h3>    //图片下的标题
    </div>
</div>

CSS代码：

.circle-border {
    background-color: transparent;        //背景透明无颜色
}

.img-container {           //图片和蒙版以及蒙版上的字
    position: relative;           //相对于自身的正常位置定位
    overflow: hidden;           //当内容溢出时显示方式为隐藏
    border-top-left-radius: 10px;          //图片左上右上为圆角
    border-top-right-radius: 10px;
}

.img-container .img-textbox {        //蒙版
    position: absolute;             //相对于img-container定位，
    top: 0;
    left: -2px;
    width: 101%;
    height: 100%;
    /*transform: scale(0);*/
    opacity: 0;                  //初始透明度为0
    border-top-left-radius: 10px;          //边框圆角
    border-top-right-radius: 10px;
    background-color: rgba(0,0,0,0.75) !important;   //背景颜色改变，                             优先级也改变
    box-shadow: inset 0px 0px 10px 4px rgba(255,255,255,.75);//阴影
    transition: all 0.5s ease;        //过渡的样式
    display: flex;         //多栏多列的布局
}

.img-container:hover .img-textbox {       //鼠标放上时，蒙版的透明度为1 ，可见
    /*transform: scale(1);*/
    opacity: 1;
}

.img-text {               //蒙版上的文字的样式
    color: #fff;
    /*padding-top: 25%;*/
    font-size: 20px;
    font-weight: 400;
    margin: auto;
}

.circle-border .img-header {          //图片下标题的样式
    background-color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}