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

今天药忘吃喽~ 2022-01-13 10:25 323阅读 0赞

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

<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>

发表评论取消回复

表情：

评论列表（有 0 条评论，323人围观）

还没有评论，来说两句吧...

相关阅读

相关图片遮罩效果

欢迎访问我的博客地址 : [博客地址][Link 1] **鼠标移入容器半遮罩层从下方逐渐移上去** 话不多说，直接上代码! <!DOCTYPE html...

小咪咪/ 2024年04月18日 16:53/ 0 赞/ 83 阅读

相关 C# 如何给Word文档设置背景颜色和背景图片

C\ 如何给Word文档设置背景颜色和背景图片 Word文档在创建时，背景颜色都是白色的，这样的背景色比较单一，看久了以后也非常容易视觉疲劳，给文档设置一个合适的背景颜色或者

﹏ヽ暗。殇╰゛Y/ 2024年02月18日 14:19/ 0 赞/ 39 阅读

相关取消hexo的matery主题的背景图遮罩颜色

一. 问题背景使用hexo搭建了一个博客，使用了matery主题，但是背景图有一个遮罩，如下： ![在这里插入图片描述][watermark_type_ZmFuZ3

素颜马尾好姑娘i/ 2022年12月21日 00:51/ 0 赞/ 153 阅读

相关 css3、scss给图片加遮罩层

![效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dl

﹏ヽ暗。殇╰゛Y/ 2022年10月07日 11:46/ 0 赞/ 214 阅读

相关给web请求加遮罩动画

效果预览： ![1468106-20190403142606032-795435746.png][] css: ![ContractedBlock.gif][]

雨点打透心脏的1/2处/ 2022年10月03日 00:33/ 0 赞/ 183 阅读

相关 CSS背景遮罩

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

￡神魔★判官ぃ/ 2022年09月01日 07:59/ 0 赞/ 270 阅读

相关给图片动态添加半透明遮罩效果

当鼠标hover到图片上时，出现半透明遮罩效果，移除hover则取消半透明遮罩效果 <!DOCTYPE html> <html lang="en">

淩亂°似流年/ 2022年06月01日 02:51/ 0 赞/ 223 阅读

相关遮罩

<div class =“modal-backdrop in”id =“loadingModal”style =“display：none; z-index：20000

系统管理员/ 2022年05月26日 00:19/ 0 赞/ 280 阅读

相关给div加背景图片

注意事项：url引入路径需要加引号： style="background: url('../images/符号 15 – 1.png');background-s

浅浅的花香味﹌/ 2022年03月26日 13:24/ 0 赞/ 332 阅读

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

方法一：通过定位叠加（注意层级关系） <style> .block { position: relativ

今天药忘吃喽~/ 2022年01月13日 10:25/ 0 赞/ 324 阅读