Установите непрозрачность родительскому, но не дочернему

Я хотел бы установить непрозрачность родительского div, но не один конкретный дочерний div. Так у меня есть HTML-код, как:Установите непрозрачность родительскому, но не дочернему

body { 
 
    background-image: url(http://url.jpg) 
 
} 
 
#main { 
 
    opacity: 0.9; 
 
} 
 
#slider { 
 
    opacity: 1; 
 
}

<body> 
 
    <div id="main"> 
 
    <div id="slider"> 
 
    </div> 
 
    <div id="content-wrapper"> 
 
    </div> 
 
    </div> 
 
</body>

Очевидно, что это не будет работать. Весь #main div теперь прозрачен для фонового div. Это то, чего я хочу, но не #slider div. По какой-то причине, когда только opacity в # content-wrapper, ничего не происходит вообще. Любые идеи?

Редактировать: Я не могу использовать цвет rgba, так как мне бы хотелось, чтобы фоновое изображение прошло. Не могли бы вы объяснить, почему добавление непрозрачности в # content-wrapper не работает?

источник

2016-08-24 RobbTe

Если 'background' твердый цвет, поэтому его лучше использовать' RGBA (0,0,0, 0,5) '(цвет в соответствии с вашими требование) вместо 'opacity' –

Привет, я не могу использовать цвет rgba, так как мне бы хотелось, чтобы фоновое изображение прошло. Не могли бы вы объяснить, почему добавление непрозрачности в # content-wrapper не работает? – RobbTe

Может быть, с RGBA или HSLA код цвета может помочь

#someParent { 

background: rgba(0,0,0,0.5); 

}

источник

2016-08-24 12:36:30 Friend

Установите непрозрачность родительскому, но не дочернему

ответ

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