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

时间:2014-10-29 14:15:01

标签: css image background tint

编辑:非常重要的事我忘了提及,我不能编辑基本的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);
}

我可能做错了。

6 个答案:

答案 0 :(得分: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;
}

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

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

答案 1 :(得分: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);
}

答案 2 :(得分:0)

可能不适用,具体取决于你想要做什么(建议JSFiddle),但你应该看看SVG过滤器:

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

答案 3 :(得分: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

答案 4 :(得分:0)

这样的东西?

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

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

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

    &#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;

答案 5 :(得分: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)。