Question

我正在尝试在另一个包含文本的div中插入带有图像的div。我已经设置了z-align，因此带有文本的主div在上面。

带图像的div只是为第一个div的背景添加纹理。

还有其他办法吗？

感谢。

以下是相关代码：

CSS：

    #websiteBG2 {
opacity:0.2;
width:100%;
border-radius:15px;
z-align:1;

}



    #textboxdiv {
    font: 15px Georgia, "Times New Roman", Times, serif;
    color: #FFFFFF;
    width: 700px;
height: 600px;
border-radius:15px;
box-shadow: 0px 0px 0px 8px rgba(255,255,0,0.9);  
background-color:#08298A;
opacity:0.8;
text-align:center;
margin-left: auto;
    margin-right: auto;
z-align:2;

}

HTML：

<div id="textboxdiv">
<br>
Introducing ----, a game created by ----.

<div id="websiteBG2">
<img src="websiteBG2.jpg" width="100%" height="100%"/>
</div>

</div>

Answer 1

您可以在CSS中设置背景图片：

background-image: url('<path to file'>);

您目前正在做的只是将常规图像插入div，而不是背景图像。

Answer 2

试试这个

<div id="textboxdiv">
    <div id="div_txt">
       <br>
        Introducing ----, a game created by ----.
     </div>

    <div id="websiteBG2">
        <img src="images.jpg" width="100%" height="100%"/>
    </div>
</div>

在css文件中

#div_txt
{
position:absolute;
}
#websiteBG2 {
opacity:0.2;
width:100%;
border-radius:15px;
z-align:1;
}



#textboxdiv {
font: 15px Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
width: 700px;
height: 600px;
border-radius:15px;
box-shadow: 0px 0px 0px 8px rgba(255,255,0,0.9);  
background-color:#08298A;
opacity:0.8;
text-align:center;
margin-left: auto;
margin-right: auto;
z-align:2;
position:relative;
}

Answer 3

试试这个：

<强> HTML：

<div id="textboxdiv">
    <br>Introducing ----, a game created by ----.
    <div id="websiteBG2">

    </div>
</div>

<强> CSS：

#websiteBG2 {
    opacity:0.2;
    width:100%;
    border-radius:15px;
    z-align:1;
}
#textboxdiv {
    font: 15px Georgia, "Times New Roman", Times, serif;
    color: #FFFFFF;
    width: 700px;
    height: 600px;
    border-radius:15px;
    box-shadow: 0px 0px 0px 8px rgba(255, 255, 0, 0.9);
    background-color:#08298A;
    opacity:0.8;
    text-align:center;
    margin-left: auto;
    margin-right: auto;
    z-align:2;
}
#textboxdiv:after {
    content:"";
    background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTmCZItwkhIcWH_uG0WQRNfs63BTRIcOHrme2TxcDb1jZLJ7nkhpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
    border-radius: 15px;
}

Demo.

编辑：我编辑了CSS，使背景图像半透明。

在div中使用div来干扰文本？

3 个答案: