CSS颜色背景在图象 [英] CSS color background over image

问题描述

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

我想在图像背景上有一个半透明的颜色背景作为色调。这是我试过的：
这只是显示的图像：

  background：url ，rgba（0,0,0,0.5）; 
  

这显示图像并打破其缩放（背景尺寸：100％;）：

  background：rgba（0,0,0,0.5），url（image） 
  

这使得背景全黑，透明度渐变，而不是图像的后面： / p>

  background-image：url（image） 
 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）; 
} 
  

我可能做错了。

解决方案

CSS-only： 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; 
} 
  

基本上，不是在元素的外部显示框阴影，

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

EDIT: Extremely important thing I forgot to mention, I can't edit the base html, only the css. This is for a reddit stylesheet.

I want to have a semi-transparent color background over an image background as a tint. Here's what I've tried: This just shows the image:

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

This shows the image and breaks its scaling (background-size: 100%;):

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

This makes the background entirely black, with the transparency fading to whatever's behind it instead of the image:

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

This once again shows just the image, and breaks the scaling:

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

This shows just the image without breaking the scaling:

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

I tried using @Trevan 's answer with no luck too:

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

I'm probably doing it wrong though.

解决方案

CSS-only: box-shadow

See a basic example here 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;
}

Basically, instead of having the box shadow showing on the outside of the element, we put it on the inside.

The trick is to have the first or second parameter(?) to be larger than the elements width/height so that it overlaps the whole image.

这篇关于CSS颜色背景在图象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！