背景图像上的半透明颜色层?


212

我有一个DIV,我想放置一个图案作为背景。此图案是灰色的。为了使它更好一点,我想在上面放一个透明的颜色“层”。以下是我尝试过的方法,但是没有用。有没有办法将彩色图层放在背景图像上?

这是我的CSS:

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

Answers:


214

这里是:

.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%;
}

对此的HTML:

<div class="background">
    <div class="layer">
    </div>
</div>

当然.background,如果其中没有其他元素,则需要为该类定义宽度和高度


9
绝对没有相对和绝对定位的理由。
Sven Bieder'2

2
嗯,是的,当然,我有点喜欢模式弹出窗口,不知道为什么。您的回答当然更干净,更轻松。
JohannesKlauß2012年

@JohannesKlauß他的答案为什么更简洁?至少对于我来说,它不起作用。
Danny22'6

2
我认为这比较干净。箱阴影有问题,如果含量不超过BG等
杰克

1
完美的解决方案!
罗伊·肖阿

299

我知道这是一个非常老的线程,但是它显示在Google的顶部,所以这是另一个选择。

这是纯CSS,不需要任何额外的HTML。

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

框阴影功能的用途令人惊讶。


3
非常好!在性能方面,这是个好主意吗?还没研究过阴影效果
Miguel Stevens 2014年

18
不错的技巧,但性能杀手。这将减慢每个移动设备的速度。盒子阴影会导致移动设备上的性能问题。最好避免这种情况,特别是如果还有其他方法。
Hexodus 2015年

4
你是天才先生!
米卡

7
只是几年后的一次更新:我目前在kotulas.com上都使用这种方法,而且我注意到并没有明显的速度下降。如果您在数百个元素上使用它,可能会成为一个问题,但是即使在包含150张以上图片的页面上,对我来说这也不是问题。(这是在工作计算机上。)自然,您需要提前对其进行测试,以确保它适合您。至于旧的浏览器兼容性,由于回退是用户看不到悬停效果(没有其他问题),因此我可以接受。
BevansDesign

8
我个人是这样使用它的:box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .2)
Neurotransmitter

134

从CSS-Tricks开始... ...只有一种方法可以做到这一点,而无需z-indexing和添加伪元素-需要线性渐变,我认为这意味着您需要CSS3支持

.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);
}

这很好用,您不能为渐变设置动画,但是,如果要使颜色脉动,则不要以任何方法认为这是可行的。
sricks 2015年

1
我拥有background-size:cover;background-position:center center;着手这个元素。这似乎抵消了这种影响。
安慰

与background-size配合使用效果很好:cover; 后。至少在铬上。
davidbonachera

绝对是对背景图案和图像进行着色的最便捷方法,但是要小心使用Chrome和其他工具进行检查,特别是如果将其应用于body标签,则chrome滚动时会滞后一吨。FF处理得很好。
Hastig Zusammenstellen

4
我是唯一一个足够获得汤姆参考的人吗?
亚伯兰


26

然后,您需要一个带有bg图像的包装元素,以及一个带有bg颜色的content元素:

<div id="Wrapper">
  <div id="Content">
    <!-- content here -->
  </div>
</div>

和CSS:

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

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

25

试试这个。为我工作。

.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;
}

2
这是一个非常好的答案,不需要其他HTML元素。谢谢!
patr1ck

16

我将这种方法用作在图像上应用颜色色调和渐变的一种方法,以便在您无法控制图像颜色配置文件时,使动态叠加文字的样式易于辨认。您不必担心z-index。

的HTML

<div class="background-image"></div>

萨斯

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 247, 216, 0.7);
  }
}

的CSS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
}

.background-image:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(248, 247, 216, 0.7);
  }

希望能帮助到你


这可行,但是您需要更改第二个“ left:0;”。改为“底部:0;”
马修·哈德森

1
这应该是可以接受的答案,因为它避免了不必要的元素创建。只要确保您的.background-image div至少具有一个位置即可:相对
mjsarfatti

6

请参阅https://stackoverflow.com/a/18471979/193494上的答案,以获取可能解决方案的全面概述:

  1. 使用具有线性渐变的多个背景,
  2. 具有生成的PNG的多个背景,或者
  3. 设置:after伪元素的样式以用作辅助背景层。

4
请不要发布链接作为答案。将相关代码放在此处,但还要链接到您从中复制它的源。
Blazemonger 2014年

4

为什么这么复杂?您的解决方案几乎是正确的,除了它是使图案透明和使背景颜色稳定的一种方法。PNG可以包含透明胶片。因此,通过将图层设置为70%并保存图像,可以使用photoshop使图案透明。然后,您只需要一个选择器。跨浏览器工作。

CSS:

.background {
   background: url('../img/bg/diagonalnoise.png');/* transparent png image*/
   background-color: rgb(248, 247, 216);
}

HTML:

<div class="background">
   ...
</div> 

这是基本的。下面是一个使用示例,其中我从切换到backgroundbackground-image但是两个属性的工作原理相同。

body { margin: 0; }
div {
   height: 110px !important;
   padding: 1em;
   text-transform: uppercase;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 600;
   color: white;
   text-shadow: 0 0 2px #333;
}
.background {
   background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');/* transparent png image */
   }
.col-one {
  background-color: rgb(255, 255, 0);
}
.col-two {
  background-color: rgb(0, 255, 255);
}
.col-three {
  background-color: rgb(0, 255, 0);
}
<div class="background col-one">
 1. Background
</div> 
<div class="background col-two">
 2. Background
</div> 
<div class="background col-three">
 3. Background
</div> 

请等一分钟!加载外部样式需要花费一些时间。

这个网站似乎很慢...


您是否可以使用例如背景颜色:hover并将其叠加在背景图像上?
2015年

启动Photoshop并执行此操作将花费更长的时间,而不是添加几行代码。
nihiser

我尝试了此操作,但发现透明png文件大小很大(〜500kb),这可能是这种方法的缺点
madz

@madz我说过要制作模式-不应导致大文件。我添加了一个使用110x110px图像(最小5kb)的示例。如果您确实需要更大的图像,请尝试使用tinypng.com对其进行压缩。
Hexodus19年

2

您可以使用半透明像素,例如,即使在base64中也可以在此处生成,这是白色50%的示例:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=),
url(../img/leftpanel/intro1.png);
background-size: cover, cover;
  • 没有上传

  • 没有额外的HTML

  • 我想加载应该比盒子阴影或线性渐变更快


2

这是仅使用CSS的更简单的技巧。

<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%;
        height: 100%; 
    }

    </style>


1

另一个带有SVG的内嵌重叠式图片(请注意:如果#在svg代码内部使用,则必须对该代码进行urlencode!):

background: url('data:image/svg+xml;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;

0

我只是在目标背景div上使用了background-image css属性。
请注意,背景图片仅接受渐变颜色功能。
因此,我使用线性渐变两次添加了相同的所需叠加颜色(使用最后的rgba值来控制颜色不透明度)。

另外,找到这两个有用的资源来:

  1. 在背景图片上添加文字(或带有其他任何内容的div):Hero Image
  2. 仅模糊背景图像,而不会使顶部的div 模糊模糊的背景图像

的HTML

<div class="header_div">
</div>

<div class="header_text">
  <h1>Header Text</h1>
</div>

的CSS

.header_div {
  position: relative;
  text-align: cover;
  min-height: 90vh;
  margin-top: 5vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  background-image: linear-gradient(rgba(38, 32, 96, 0.2), rgba(38, 32, 96, 0.4)), url("images\\header img2.jpg");
  filter: blur(2px);
}

.header_text {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}

0

您还可以为覆盖颜色添加不透明度。

而不是做

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

你可以做:

background: url('../img/bg/diagonalnoise.png');

然后为不透明度颜色创建新样式:

.colorStyle{
    background-color: rgba(248, 247, 216, 0.7);
    opacity: 0.8;
}

将不透明度更改为低于1的任意数字。然后使该颜色样式与图像的大小相同。它应该工作。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.