具有透明颜色的背景图像答案

【问题标题】：Have a background image with a transparent colour具有透明颜色的背景图像
【发布时间】：2014-09-30 12:37:43
【问题描述】：

我希望能够使用透明颜色覆盖图像的背景图像。但是当我尝试把

background-image: url(mylocation);
background-color: darkgray;
opacity: 0.5;

在 body {} 标签内，图像显示，但不显示颜色，其他一切都是透明的。我很确定其他所有内容都是透明的，因为它们都是身体的子部分，但我该如何解决这个问题，这样才能成为我想要的样子？

谢谢！

【问题讨论】：

您的问题主体与标题有何关系？它们似乎是两种截然不同的东西？
哎呀，这是别的东西的标题..
这些答案有帮助吗？还是你还卡住了？

标签： css

【解决方案1】：

试试这个：

body{
  background:url('Image url');
  opacity:0.5;
}

#container{
  background:transparent:
}
//=====================contain all tags

HTML 设计：

<body>
 <div id="container">
 </div>
</body>

【讨论】：

【解决方案2】：

如果图像无法显示，则背景颜色是备用颜色，而不是图像的背景。另请注意，opacity 适用于元素的全部内容，而不仅仅是背景。

试试

html {
    background:url('Image url'); 
}


body {
    /*Use RGBA to get transparent color*/
    background-color:rgba(100,100,100,0.5);
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:0;
}

Demo

虽然这可能是更好的选择：

body
{
    background-image: url(http://placehold.it/200x200/ff0000/ffffff&text=BG+Image);
}


body:before
{
    display:block;
    opacity:0.5;
    background-color:darkgrey;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    content:"";
    z-index:-1;
}

Demo

【讨论】：