blocks|key|442022|text|这就是它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|442023|.background+{
++++background:url('../img/bg/diagonalnoise.png');
++++position:+relative;
}

.layer+{
++++background-color:+rgba(248,+247,+216,+0.7);
++++position:+absolute;
++++top:+0;
++++left:+0;
++++width:+100%25;
++++height:+100%25;
}|code-block|syntax|javascript|442024|用于此的HTML：|442025|<div+class="background">
++++<div+class="layer">
++++</div>
</div>|442026|当然，如果.background类中没有其他元素，则需要定义该类的宽度和高度|offset|length|style|CODE|442027|entityMap^0|0|0|0|0|5|B|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@$M|X|N|Y|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Here it is:</p>

<pre><code>.background {
    background:url('../img/bg/diagonalnoise.png');
    position: relative;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</code></pre>

<p>HTML for this:</p>

<pre><code>&lt;div class="background"&gt;
    &lt;div class="layer"&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Of course you need to define a width and height to the <code>.background</code> class, if there are no other elements inside of it</p>


blocks|key|656621|text|我知道这是一个非常老的帖子，但它在Google中显示在顶部，所以这里有另一个选择。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|656622|这是一个纯CSS，不需要任何额外的HTML。|656623|box-shadow:+inset+0+0+0+1000px+rgba(0,0,0,.2);|code-block|syntax|javascript|656624|长方体阴影功能有许多令人惊讶的用途。|656625|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I know this is a really old thread, but it shows up at the top in Google, so here's another option.</p>

<p>This one is pure CSS, and doesn't require any extra HTML.</p>

<pre><code>box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
</code></pre>

<p>There are a surprising number of uses for the box-shadow feature.</p>


blocks|key|656689|text|来自CSS-Tricks...有一个简单的方法可以做到这一点，不需要z索引和添加伪元素--需要线性梯度，我认为这意味着你需要CSS3支持|type|unstyled|depth|inlineStyleRanges|entityRanges|data|656690|.tinted-image+{
++background-image:+
++++/*+top,+transparent+red+*/
++++linear-gradient(
++++++rgba(255,+0,+0,+0.45),+
++++++rgba(255,+0,+0,+0.45)
++++),
++++/*+your+image+*/
++++url(image.jpg);
}|code-block|syntax|javascript|656691|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>From CSS-Tricks... there is a one step way to do this without z-indexing and adding pseudo elements-- requires linear gradient which I think means you need CSS3 support</p>

<pre><code>.tinted-image {
  background-image: 
    /* top, transparent red */
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* your image */
    url(image.jpg);
}
</code></pre>


blocks|key|442249|text|您还可以使用线性渐变和图像：http://codepen.io/anon/pen/RPweox|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|442250|.background{
++background:+linear-gradient(rgba(0,0,0,.5),+rgba(0,0,0,.5)),
++++url('http://www.imageurl.com');
}|code-block|syntax|javascript|442251|这是因为线性梯度函数创建了一个添加到背景堆栈的图像。https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient|442252|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/anon/pen/RPweox|1|https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient^0|E|X|0|0|0|Q|1S|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

<p>You can also use a linear gradient and an image:
<a href="http://codepen.io/anon/pen/RPweox">http://codepen.io/anon/pen/RPweox</a></p>

<pre><code>.background{
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url('http://www.imageurl.com');
}
</code></pre>

<p>This is because the linear gradient function creates an Image which is added to the background stack. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient">https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient</a></p>


blocks|key|442091|text|尝尝这个。这对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|442092|.background+{
++++background-image:+url(images/images.jpg);
++++display:+block;
++++position:+relative;
}

.background::after+{
++++content:+"";
++++background:+rgba(45,+88,+35,+0.7);
++++position:+absolute;
++++top:+0;
++++left:+0;
++++right:+0;
++++bottom:+0;
++++z-index:+1;
}

.background+>+*+{
++++z-index:+10;
}|code-block|syntax|javascript|442093|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this. Works for me.</p>

<pre><code>.background {
    background-image: url(images/images.jpg);
    display: block;
    position: relative;
}

.background::after {
    content: "";
    background: rgba(45, 88, 35, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.background &gt; * {
    z-index: 10;
}
</code></pre>


blocks|key|656529|text|然后，您需要一个包含bg图像的包装元素，其中包含具有bg颜色的content元素：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|656530|<div+id="Wrapper">
++<div+id="Content">
++++
++</div>
</div>|code-block|syntax|javascript|656531|和css：|656532|#Wrapper{
++++background:url(../img/bg/diagonalnoise.png);+
++++width:300px;+
++++height:300px;
}

#Content{
++++background-color:rgba(248,247,216,0.7);+
++++width:100%25;+
++++height:100%25;
}|656533|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You need then a wrapping element with the bg image and in it the content element with the bg color:</p>

<pre><code>&lt;div id="Wrapper"&gt;
  &lt;div id="Content"&gt;
    &lt;!-- content here --&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>and the css:</p>

<pre><code>#Wrapper{
    background:url(../img/bg/diagonalnoise.png); 
    width:300px; 
    height:300px;
}

#Content{
    background-color:rgba(248,247,216,0.7); 
    width:100%; 
    height:100%;
}
</code></pre>


blocks|key|656791|text|这里有一个更简单的技巧，只有css。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|656792|​|656793|<div+class="background">+</div>
++++<style>
++++.background+{
++++++position:relative;
++++++height:50px;
++++++background-color:+rgba(248,+247,+216,+0.7);
++++++background-image:+url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC);+
++++}

++++.background:after+{
++++++++content:"+";
++++++++background-color:inherit;
++++++++position:+absolute;
++++++++top:+0;
++++++++left:+0;
++++++++width:+100%25;
++++++++height:+100%25;+
++++}

++++</style>|code-block|syntax|javascript|656794|656795|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>Here is a more simple trick with only css.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="background"&gt; &lt;/div&gt;
    &lt;style&gt;
    .background {
      position:relative;
      height:50px;
      background-color: rgba(248, 247, 216, 0.7);
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC); 
    }

    .background:after {
        content:" ";
        background-color:inherit;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; 
    }

    &lt;/style&gt;</code></pre>
</div>
</div>
</p>


blocks|key|442328|text|另一个使用SVG作为内联覆盖图像(注意:如果您在svg代码中使用#，则必须对其进行urlencode！)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|442329|background:+url('data:image/svg%2Bxml;utf8,<svg+xmlns="http://www.w3.org/2000/svg"+viewBox="0+0+1+1"><path+fill="rgba(255,+255,+255,+0.4)"+d="M0+0h1v1H0z"/></svg>')
++++++++++++++++no-repeat+center+center/cover,+
++++++++++++url('overlayed-image.jpg')+no-repeat+center+center/cover;|code-block|syntax|javascript|442330|entityMap^0|W|1|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Another one with an SVG as inline overlay-image (note: if you use <code>#</code> inside the svg-code you have to urlencode that!):</p>

<pre><code>background: url('data:image/svg+xml;utf8,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"&gt;&lt;path fill="rgba(255, 255, 255, 0.4)" d="M0 0h1v1H0z"/&gt;&lt;/svg&gt;')
                no-repeat center center/cover, 
            url('overlayed-image.jpg') no-repeat center center/cover;
</code></pre>


blocks|key|442589|text|background-image:+linear-gradient(180deg,+rgba(255,255,255,0)+0,+rgba(0,0,0,0.6)+0),url(images/image.jpg);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|442590|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>background-image: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(0,0,0,0.6) 0),url(images/image.jpg);
</code></pre>


blocks|key|657042|text|实际上，我以一种不同的方式使用了:before，我只使用了一个HTML元素<div>，并且只使用了一个CSS类名，并使用了伪元素技巧：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|657043|​|657044|.background+{
++/*+↓↓↓+the+decorative+CSS+*/

++font-family:+tahoma;
++display:+flex;
++align-items:+center;
++justify-content:+space-between;
++padding:+10px+20px;
++border-radius:+8px;
++overflow:+hidden;
++
++/*+↓↓↓+the+main+CSS+*/

++position:+relative;
++background:+url('https://picsum.photos/id/355/600/400')+no-repeat+center+/+cover;
++z-index:+1;
}

.background:before+{
++/*+↓↓↓+the+main+CSS+*/

++content:+'';
++position:+absolute;
++top:+0;
++right:+0;
++bottom:+0;
++left:+0;
++background:+rgba(255,+255,+255,+0.5);
++z-index:+-1;
}

.text+{
++/*+↓↓↓+the+decorative+CSS+*/

++font-size:+20px;
++color:+#072252;
}|code-block|syntax|javascript|657045|<div+class="background">
++<span+class="text">Some+child</span>
++<span+class="text"></span>
</div>|657046|657047|entityMap^0|G|7|11|5|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|Q|$]]

<p>Actually, I used <code>:before</code> in a different way, I just used one HTML element <code>&lt;div&gt;</code> and using just one CSS class name and using pseudo-element trick:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.background {
  /* ↓↓↓ the decorative CSS */

  font-family: tahoma;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-radius: 8px;
  overflow: hidden;
  
  /* ↓↓↓ the main CSS */

  position: relative;
  background: url('https://picsum.photos/id/355/600/400') no-repeat center / cover;
  z-index: 1;
}

.background:before {
  /* ↓↓↓ the main CSS */

  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.5);
  z-index: -1;
}

.text {
  /* ↓↓↓ the decorative CSS */

  font-size: 20px;
  color: #072252;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="background"&gt;
  &lt;span class="text"&gt;Some child&lt;/span&gt;
  &lt;span class="text"&gt;&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|656884|text|您还可以向覆盖颜色添加不透明度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|656885|而不是做|656886|background:+url('../img/bg/diagonalnoise.png');
background-color:+rgba(248,+247,+216,+0.7);|code-block|syntax|javascript|656887|您可以执行以下操作：|656888|background:+url('../img/bg/diagonalnoise.png');|656889|然后为不透明颜色创建一个新样式：|656890|.colorStyle{
++++background-color:+rgba(248,+247,+216,+0.7);
++++opacity:+0.8;
}|656891|将不透明度更改为您想要的小于1的任何数字。然后将此颜色样式设置为与您的图像相同的大小。应该能行得通。|656892|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>You can also add opacity to your overlay color.</p>

<p>Instead of doing</p>

<pre><code>background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);
</code></pre>

<p>You can do:</p>

<pre><code>background: url('../img/bg/diagonalnoise.png');
</code></pre>

<p>Then create a new style for the opacity color:</p>

<pre><code>.colorStyle{
    background-color: rgba(248, 247, 216, 0.7);
    opacity: 0.8;
}
</code></pre>

<p>Change the opacity to whatever number you want below 1. Then you make this color style the same size as your image. It should work.</p>


blocks|key|442397|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|442398|#img-div{
++++height:+100vh;
++++background-image:+url("https://images.pexels.com/photos/46160/field-clouds-sky-earth-46160.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
++++background-position:+center;
++++background-size:+cover;
++++background-repeat:+no-repeat;
++++position:+relative;
}

#overlay-div{
++++background-color:+rgba(0,+0,+0,+0.5);
++++height:+100vh;
++++position:+relative;
}|code-block|syntax|javascript|442399|<div+id="img-div">
++<div+id="overlay-div"></div>
</div>|442400|442401|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#img-div{
    height: 100vh;
    background-image: url("https://images.pexels.com/photos/46160/field-clouds-sky-earth-46160.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=750&amp;w=1260");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

#overlay-div{
    background-color: rgba(0, 0, 0, 0.5);
    height: 100vh;
    position: relative;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="img-div"&gt;
  &lt;div id="overlay-div"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|656935|text|在伪类之前使用并使用不透明度|type|unstyled|depth|inlineStyleRanges|entityRanges|data|656936|.left-side+{
++position:+relative;
++background-color:+#5200ff;+/*bg+color*/
}

.left-side::before+{
++content:+'';
++position:+absolute;
++left:+0;
++top:+0;
++width:+100%25;
++height:+100%25;
++background-image:+url(./images/img.jpeg);++/*bg+image*/
++background-size:+cover;
++background-position:+100%25;
++opacity:+0.22;++/*use+opacity+to+show+bg+color+*/
}|code-block|syntax|javascript|656937|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Use before pseudo-class and use opacity</p>
<pre><code>.left-side {
  position: relative;
  background-color: #5200ff; /*bg color*/
}

.left-side::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(./images/img.jpeg);  /*bg image*/
  background-size: cover;
  background-position: 100%;
  opacity: 0.22;  /*use opacity to show bg color */
}
</code></pre>


<p>I have a DIV and I would like to put a pattern as background. This pattern is gray. So to make it a little more nice, I would like to put a light transparent color "layer" over. Below is what I tried but which did not work. Is there a way to put the colored layer over the background image? </p>

<p>Here's my CSS:</p>

<pre><code>background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);
</code></pre>


Semi-transparent color layer over background-image?

我有一个DIV，我想放一个图案作为背景。此图案为灰色。因此，为了让它更好一点，我想在上面放一个浅透明的颜色“层”。下面是我尝试过的方法，但不起作用。有没有办法把彩色图层放在背景图像上？这是我的CSS：background: url('../img/bg/diagonalnoise.png');background-color: rgba(248, 247, 216, 0.7);

问背景图像上的半透明彩色层？
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问背景图像上的半透明彩色层？EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问背景图像上的半透明彩色层？
EN