Div與div內的圖像不會干擾文本？

我想插入一個div裏面的另一個div裏面有文字的圖片。我已經設置了z-align，以便其中包含文本的主div位於上方。Div與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>

來源

2014-01-26 user3227878

試試這個

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

來源

2014-01-26 10:02:35

感謝您的建議，但我似乎無法對齊#div_txt文本。我試過text-align：center;當然，但沒有那個運氣。提前致謝。 – user3227878

您可以在CSS中設置背景圖片：

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

您目前所做的只是將常規圖像插入div而不是背景圖像。

來源

2014-01-26 09:49:16 ElendilTheTall

雖然這樣做，我將能夠設置背景圖像的不透明度？ – user3227878

嗯，並嘗試了你的建議後，它似乎並不真正在尋找什麼。我目前有一個藍色背景的主文本div。我想讓背後的其他div爲圖像賦予藍色紋理。 – user3227878

然後設置主文本div的背景圖像以使用紋理圖像。有沒有必要有一個div只爲背景圖片 – ElendilTheTall

試試這個：

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使背景iamge半透明。

來源

2014-01-26 10:02:36

感謝您的建議，但理想情況下我正在使用我已有的紋理。 – user3227878

@ user3227878，請更改圖片網址的網址。 –

Div與div內的圖像不會干擾文本？

回答

相關問題