在图象的C​​SS颜色背景

Question

编辑：非常重要的事我忘了提及，我不能编辑基本的html，只能编辑css。这是一个reddit样式表。

我想在图像背景上使用半透明的彩色背景作为色调。这是我尝试过的： 这只是显示图像：

background: url(image) no-repeat, rgba(0,0,0,0.5);

这会显示图像并缩小其缩放比例（背景大小：100％;）：

background: rgba(0,0,0,0.5), url(image) no-repeat;

这使得背景完全变黑，透明度逐渐消失，而不是背后的图像：

background-image: url(image) no-repeat;
background: rgba(0,0,0,0.5);

这再次显示了图像，并打破了缩放：

background-image: url(image) no-repeat;
background-color: rgba(0,0,0,0.5);

这只显示图像而不会破坏缩放：

background: url(image) no-repeat;
background-color: rgba(0,0,0,0.5);

我尝试使用@Trevan的答案也没有运气：

#header:lang(dd) {
    position: relative;
    background: url(%%HexBackground%%) no-repeat;
}

#header:lang(dd)::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
}

我可能做错了。

Answer 1

仅限CSS：box-shadow

在此处查看基本示例 http://jsfiddle.net/vyo168gg/1/

div {
    width: 500px;
    height: 300px;
    background: url(image) no-repeat;
    box-shadow: 0px 5000px 0px rgba(256, 0, 0, 0.5) inset;
}

基本上，我们不是将元素阴影显示在元素的外部，而是将其放在内部。

诀窍是让第一个或第二个参数（？）大于元素的宽度/高度，以便它与整个图像重叠。

Answer 2

我可能会做的是使用一个绝对位于背景元素顶部的伪元素。

.example {
    position: relative;
    background: url(image) no-repeat;
}

.example::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
}

Answer 3

可能不适用，具体取决于你想要做什么（建议JSFiddle），但你应该看看SVG过滤器：

http://www.html5rocks.com/en/tutorials/filters/understanding-css/

Answer 4

在图片顶部叠加一个div，可能是这样的？

<强> HTML

 <div class="picContainer">
    <div class="picContainerTint"></div>
    <img src="http://rdjpg.com/300/200"/>
 </div>

<强> CSS

.picContainer {
    height: 200px;
    width:300px;
    position:relative;
}

.picContainerTint {
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.2);
    position: absolute;
    z-index:2;
}

JSFIDDLE

Answer 5

这样的东西？

我们在这里做的是使用:after伪元素为您提供所需的效果，即在不混淆DOM的情况下获得重叠的图像色调。

与其他人相比，这样做的好处是

1. 您不会在文档中插入仅显示元素，保持内容集中（应该如此！）
2. 这允许您将所有悬停元素保留在图像的实际div上，而不是需要引入不必要的复杂CSS选择器。实际上，这些可能会减慢您的网站速度，不管您信不信，
3. 由于堆叠上下文保留在div本身内，因此没有z-index问题的风险。这可能看起来很小，但如果您尝试支持IE6或7，则可能是一个庞大的PITA。

享受！

＆＃13;
＆＃13;
.my-totally-cool-image-tint {
  background-image: url(http://rawmultimedia.files.wordpress.com/2012/03/totally-cool-crazy-epic-2.jpg);
  background-size: cover;
  height: 400px;
  width: 600px;
  position: relative;
}
.my-totally-cool-image-tint:after {
  content: '';
  position:absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(12, 218, 255, 0.5);
  transition: 0.2s ease-out 0.5s;
  opacity: 1;
}

.my-totally-cool-image-tint:hover:after {
  opacity: 0;
  transition: 1s ease-out;
}
＆＃13;
<div class="my-totally-cool-image-tint">
  
  </div>  
＆＃13;
＆＃13;
＆＃13;

Answer 6

您需要做的是将透明度与背景分开。做以下事情应该有效：

HTML

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

CSS

.background{
    background: url(image) no-repeat;
    position: relative;
}
.tint{
    background: url(transparent-image);
    height: 100%;
    position: absolute;
    width: 100%;
}

您可以为色调使用颜色和不透明度，但并非所有浏览器都会确认该属性（IE8）。