图像上的 CSS 颜色背景

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. 不存在 z-index 问题的风险，因为堆叠上下文保存在 div 本身中。这可能看起来很小，但如果您尝试支持 IE6 或 7，它可能是一个巨大的 PITA。

享受吧！

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

<div class="my-totally-cool-image-tint">
  
  </div>  

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