Question

我正在尝试将图像设置为背景并为内容添加背景颜色。但是我无法通过背景颜色获取背景图像。此外，我希望背景图片超过span#test任何帮助都将受到高度赞赏。

 <div id="container">
               <div id="Content">
                Hello world, this is my content, Hello world, this is my content <br />
                Hello world, this is my content, Hello world, this is my content <br />
                Hello world, this is my content, Hello world, this is my content <br />
                Hello world, this is my content, Hello world, this is my content <br />
            </div>
            <span id="test">
                Test
            </span>
        </div

    #container
    {    
        position: relative;
        margin-bottom: -20px;
        background-image: url('https://www.google.co.uk/images/srpr/logo11w.png');
        background-size: contain;
        background-repeat: no-repeat;
        height: 50px;
        width: 100px;
        z-index: 10001;
    }
    #Content
    {
       background-color:#C9CACA;

    }

以下是“http://jsfiddle.net/chetangawai/FFS4V/5/”

链接

Answer 1

尝试

#container
{    
    position: relative;
    margin-bottom: -20px;
    background:#C9CACA  url('https://www.google.co.uk/images/srpr/logo11w.png') no-repeat;

}

here Jsfiddle example

Answer 2

这里我们可能需要半透明背景来显示背景图片以及彩色背景的子元素。

让我们尝试使用背景不透明度自定义

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>sample</title>
</head>
<body>
    <div>
        <div style="background: url('http://t1.gstatic.com/images?q=tbn:ANd9GcSo4ID8F-Kj9gnVC25mtiNd4zfNqyF0g4cC-kGx2HOAstRdza5v'); background-size: cover;">
                         <center>
                        <div  style="height:200px;width:500px;background-color:rgba(255,0,0,0.5);">

                            <h1 class="headingLabel" style="color: white;">Lorem ipsum
                                dolor</h1>
                            <p style="font-size: 14px;color:white">Lorem Ipsum is slechts een
                                proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is
                                de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw,
                                toen een onbekende drukker een zethaak met letters nam en ze
                                door elkaar husselde om een font-catalogus te maken. Het heeft
                                niet alleen vijf eeuwen overleefd maar is</p>
                        </div>
                                                <div style="height:100px;width:500px;background-color:rgba(255,11,100,0.5);">
                            another test content
                        </div>
                                                </center>
        </div>
    </div>
</body>
</html>

Answer 3

div#Content包含在div#container中，因此会有更高z-index并显示在#container之上，并且是背景图片。

Answer 4

您的背景下的元素为#Content，此元素将保留在背景图片下方。如果你想实现相反的目的，你可以这样做：

#container
{    
    position: relative;
    background-color:#C9CACA;
    margin-bottom: -20px;
    height: 50px;
    width: 100px;
    z-index: 10001;
}
#Content
{
    background-image: url('https://www.google.co.uk/images/srpr/logo11w.png');
    background-size: contain;
    background-repeat: no-repeat;
}

Your updated fiddle

Answer 5

更新了小提琴DEMO

#container
    {    
        position: relative;
        margin-bottom: -20px;        
        height: 50px;
        width: 100px;
        z-index: 10001;
    }
    #Content
    {background-image: url('https://www.google.co.uk/images/srpr/logo11w.png');
        background-size: contain;
        background-repeat: no-repeat;
       background-color:#C9CACA;

    }

Answer 6

这样做它会解决你的问题我在你的小提琴中检查过它，根据你的要求改变rgba的颜色

#container
{       
position: relative;
margin-bottom: -20px;
height: 50px;
width: 200px;
z-index: 10001;
}

#Content
{
background-color: rgba(102,102,102,0.3);
background: url('https://www.google.co.uk/images/srpr/logo11w.png'), rgba(102,102,102,0.5);
background-size: contain, contain ;
background-repeat: no-repeat;
    }

Answer 7

我根据NJInamdar的建议更新了我的小提琴：

 #container
        {    
            position: relative;

            background-image:   url('https://www.google.co.uk/images/srpr/logo11w.png');
            background-size: contain;
            background-repeat: no-repeat;
            z-index: 10001;
        height:600px;
        }
        #Content
        {
           background-color:#C9CACA;
        opacity : 0.6;

        }

http://jsfiddle.net/chetangawai/FFS4V/6/

无法在背景颜色前面添加背景图像

7 个答案: