Непрозрачность фонового изображения CSS, влияющая на детей внутри него

Question

Я попытался изменить непрозрачность изображения в css. Но это затрагивает всех детей внутри него. Я рассмотрел много вопросов и ответов по stackoverflow, но все же это не работает для меня. Следовательно, решил задать вопрос сам.

Мой пример кода:

<div id="home" class="home"> 

<h2 style="margin-top:130px; text-shadow: #fff 0 0 10px; color:white; font-weight:bold; font-family: 'Gloria Hallelujah', cursive;">Find the suitable tutor you are looking for..</h2><br /> 

</div> 

CSS:

#home { 
    background: url(../images/home1.png) no-repeat center center fixed; 
    display: table; 
    height: 100%; 
    position: relative; 
    width: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    /*opacity: 0.5;*/ 
} 

Сначала я попытался изменить непрозрачность div home, но так как он съедает текст, так что я решил для изменения непрозрачности изображения вручную с помощью GIMP.

Я изменил его. Даже тогда текст не имеет фактического цвета. Поэтому я попытался сделать его светом, сделав text-shadow и прочее. Тем не менее, я, кажется, не получаю фактический цвет текста.

Original Image

Это реальная картина, не изменяя непрозрачность.

Image with changed opacity in GIMP

Это изображение после изменения его непрозрачность в GIMP.

Я хочу, чтобы изображение имело такую ​​непрозрачность, но цвет текста первого изображения.

Надеюсь, что я поняла. Я загрузил эти изображения здесь, но так как у меня недостаточно репутации, поэтому мне пришлось делиться ссылками после загрузки на другом сайте.

Answer 1

Я решил это как-то.Что я сделал, я добавил еще div overlay_home и изменил его в rss в css. Это делает изображение только изменяет его непрозрачность без текста.

<div id="home" class="home"> 

<div id="overlay_home"></div> 

<h2 style="margin-top:130px; text-shadow: #fff 0 0 10px; color:white; font-weight:bold; font-family: 'Gloria Hallelujah', cursive;">Find the suitable tutor you are looking for..</h2><br /> 

</div> 

#home { 
    background: url(../images/home1.png) no-repeat center center fixed; 
    display: table; 
    height: 100%; 
    position: relative; 
    width: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    /*opacity: 0.5;*/ 
} 

#overlay_home{ 

height:100%; 
width: 100%; 
position: absolute; 
background-color: rgba(0,0,0,0.5) 


} 

Answer 2

Единственный способ, которым я знаю (до сих пор) использовать rgba() в качестве фонового цвета; это не влияет на его детей (divs или elements).

Пример:

rgba(0,0,0,0.5)

Answer 3

вы можете использовать псевдо-элемент для добавления background и добавить opacity к нему

html, 
 
body { 
 
    height: 100%; 
 
} 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#home { 
 
    display: table; 
 
    height: 100%; 
 
    position: relative; 
 
    width: 100%; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
#home:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: -1; 
 
    background: url(http://placeimg.com/640/480/any) no-repeat center center fixed; 
 
    background-size:100% auto; 
 
    opacity: 0.5; 
 
}

<div id="home" class="home"> 
 

 
    <h2 style="margin-top:130px; text-shadow: #222 0 0 10px; color:white; font-weight:bold; font-family: 'Gloria Hallelujah', cursive;">Find the suitable tutor you are looking for..</h2> 
 

 
    <br /> 
 
</div>

Answer 4

Используйте DIV внутри DIV, чтобы служить фон, и сделать, чтобы div имел только непрозрачность:

Использовать размер фона: обложка; чтобы изображение полностью покрывало. Он будет подчиняться сиде div.background. Поэтому вам нужно установить div.background на ширину и высоту 100%.

http://jsfiddle.net/Preben/0mgrt069/13/

<div id="home" class="home"> 
    <div class="background"></div> 
    <h2>Find the suitable tutor you are looking for..</h2> 
</div> 

И CSS:

h2 { 
    margin-top:130px; 
    text-shadow: #fff 0 0 10px; 
    color:black; 
    font-weight:bold; 
    font-family: 'Gloria Hallelujah', cursive; 
    } 
.background{ 
    background:url(http://lorempixel.com/400/300/nature/); 
    background-size:cover; 
    position: absolute; 
    z-index: -1; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    opacity: .4; 
    width: 100%; 
    height: 100%; 
}