在图像上的CSS颜色背景

问题描述：

编辑：非常重要的事情，我忘了提及，我不能编辑基本的HTML，只有CSS。这是一个reddit样式表。在图像上的CSS颜色背景

我想要在图像背景上具有半透明色彩背景作为色调。以下是我已经试过：这只是显示图像：

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

我可能这样做虽然错了。

您可以尝试覆盖div设置为视口的100％宽度/高度并将其设置为不透明度以达到所需的量。 – Zack 2014-10-29 14:19:44

答

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

基本上，我们把它放在里面。

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

这工作，谢谢！ – Spekular 2014-10-29 14:44:57

答

这依赖于你想要做的（建议的jsfiddle）可能不太适用，但你应该看看SVG滤镜：

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

答

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

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

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

我并不完全确定在何处放置/如何使用它。我会用我试过的更新我的帖子。 – Spekular 2014-10-29 14:37:23

答

覆盖您的图像上的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

不幸的是，这不会工作，因为我不能编辑的HTML，只有CSS。对不起，忘记提及︰/ – Spekular 2014-10-29 14:33:55

答

像这样的事情？

我们在这里做的是使用一个:after伪元素给你一个叠加的图像色调没有混淆DOM的预期效果。

到做这种方式的好处，而不是其他人

你不插入显示，只有元素到文档中，保持它的内容集中（因为它应该是！）
这允许您将所有悬停元素与图像保留在实际div上，而不需要引入不必要的复杂CSS选择器。这实际上可以减慢你的网站，不管你是否相信
没有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>

我忘了提及，我不幸的是不能编辑基本的HTML，只有CSS：/ – Spekular 2014-10-29 14:33:25

答

你需要做的是分开的背景透明度。做类似下面应该工作：

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

在图像上的CSS颜色背景

CSS-只：box-shadow

像这样的事情？

相关推荐

CSS-只：`box-shadow`