Question

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

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

在body {}标签内，图像显示但不是颜色，其他一切都是透明的。我很确定其他一切都是透明的，因为它们都是身体的子部分，但是我如何解决这个问题，这样我就会喜欢它？

谢谢！

Answer 1

如果无法显示图像，背景颜色是后备颜色，而不是图像的背景。另请注意，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

Answer 2

试试这个：

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

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

HTML设计：

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

拥有透明色的背景图像

2 个答案: