有一个透明颜色的背景图像 [英] Have a background image with a transparent colour

问题描述

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

I’d like to be able to have a background image with a transparent colour covering the image. But when I try to put

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

在body {}标签内，图片显示，但不是颜色， 。我确信一切都是透明的，因为它们都是身体的子节，但我该如何解决这个问题，这样我就是这样的？

inside the body {} tags, the image shows, but not the colour, and everything else is transparent. I’m pretty sure that everything else is transparent because they’re all child section of the body, but how would I fix this, so that it’s the way I’d like it to be?

谢谢！

推荐答案

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

The background color is a fallback if the image can't be displayed, not a background for the image. Also be aware that opacity applies to the entire contents of the element, not just the background.

p>

Try

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

演示

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

Though this may be a better option:

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

演示

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