如何给背景图片加颜色遮罩

最新推荐文章于 2024-09-16 22:10:57 发布

nrskhdzl

最新推荐文章于 2024-09-16 22:10:57 发布

阅读量3.3k

点赞数 1

本文链接：https://blog.csdn.net/nrskhdzl/article/details/92426909

版权

方法一：通过定位叠加（注意层级关系）

<style>
        .block {
            position: relative;
            margin: 50px auto;
            width: 700px;
            height: 450px;
        }

        .block > img {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .block > div {
            position: absolute;
            z-index: 2;
            width: 100%;
            height: 100%;
            background-color: rgba(8, 8, 8, 0.31);
        }
    </style>
<div class="block">
    <img src="../小米/img/1.jpg" alt=""/>
    <div></div>
</div>

方法二：通过伪类元素叠加

 <style>
        *{
            width: 100%;
            height: 100%;
        }
        .block{
            position: relative;
            margin: 50px auto;
            width: 700px;
            height: 450px;
        }
        .block > img {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .block>div:before{
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            background-color: rgba(204, 152, 22, 0.36);
            z-index: 2;
        }
    </style>
</head>
<body>
<div class="block">
    <img src="../小米/img/1.jpg" alt=""/>
    <div></div>
</div>

方法三正片叠底

 <style>
        *{
            width: 0;
            height: 0;
        }
        .block {
            position: relative;
            margin: 50px auto;
            width: 700px;
            height: 450px;
        }

        .block > img {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .block > div {
            position: absolute;
            z-index: 2;
            width: 100%;
            height: 100%;
            background-color: rgba(141, 255, 236, 0.31);
            background-blend-mode: multiply;/*正片叠底*/
        }
    </style>
</head>
<body>
<div class="block">
    <img src="../小米/img/1.jpg" alt=""/>
    <div></div>
</div>

方法四背景模糊加颜色叠加

<style>
        .block {
            position: relative;
            margin: 50px auto;
            width: 700px;
            height: 450px;
        }

        .block > img {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .block > div {
            position: absolute;
            z-index: 2;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 161, 80, 0.31);
            background-blend-mode: multiply;
            filter: blur(2px);
            overflow: hidden;
        }
    </style>
</head>
<body>
<body>
<div class="block">
    <img src="../小米/img/1.jpg" alt=""/>
    <div></div>
</div>