Div с изображением внутри div, чтобы не мешать тексту?

Я пытаюсь вставить div с изображением внутри другого div, в котором есть текст. Я установил z-align так, чтобы главный 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.

EDIT: Я редактировал CSS, чтобы сделать фон iamge полупрозрачными.

источник

2014-01-26 10:02:36

Спасибо за предложение, но в идеале я ищу использовать текстуру, которую у меня уже есть. – user3227878

@ user3227878 поэтому измените URL-адрес с URL-адресом вашего изображения. –

Div с изображением внутри div, чтобы не мешать тексту?

ответ

Смежные вопросы