0

编辑：我忘了提到非常重要的事情，我无法编辑基本 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);
}

我可能做错了。

4

6 回答 6

2

仅限 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;
}

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

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

于 2014-10-29T14:43:22.143 回答
1

我可能会做的是使用绝对定位在具有背景的元素顶部的伪元素。

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

.example::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
}
于 2014-10-29T14:23:57.270 回答
0

您需要做的是将透明度与背景分开。执行以下操作应该可以：

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

于 2014-10-29T14:25:51.093 回答
0

在你的图像上覆盖一个 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

于 2014-10-29T14:24:33.650 回答
0

像这样的东西？

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

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

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

于 2014-10-29T14:25:11.697 回答
0

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

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

于 2014-10-29T14:22:26.983 回答