Как установить непрозрачность в Родительском div и не влиять на дочерний div? [дубликат]

этот вопрос уже есть ответ здесь:

Эй, я ищу в google, но я не могу штрафовать любой идеальный ответ

Я хочу Непрозрачность в Родительском DIV, но не дочернем DIV

пример

HTML-код

<div class="parent">
<div class="child">
Hello I am child 
</div>
</div>

в CSS

.parent{
background:url('../images/madu.jpg') no-repeat 0 0;
}
.child{
Color:black;
}

Примечание: -- я хочу фон-изображение на Parent Div не цвет

65
css css3 opacity parent-child

7 ответов

может быть хорошо, если вы определите свой фон-изображение на :after псевдокласс. Напишите так:

.parent{
    width:300px;
    height:300px;
    position:relative;
    border:1px solid red;
}
.parent:after{
    content:'';
    background:url('http://www.dummyimage.com/300x300/000/fff&text=parent+image');
    width:300px;
    height:300px;
    position:absolute;
    top:0;
    left:0;
    opacity:0.5;
}
.child{
    background:yellow;
    position:relative;
    z-index:1;
}

проверить это скрипка

40

Я знаю, что это старый, но на всякий случай это поможет кому-то еще. 

<div style="background-color: rgba(255, 0, 0, 0.5)">child</div>

здесь rgba: красный, зеленый, синий, и a - это прозрачность.

72

вы можете сделать это С псевдо-элементами: (демо включено dabblet.com) enter image description here

код:

<div class="parent">
    <div class="child"> Hello I am child </div>
</div>

css:

.parent{
    position: relative;
}

.parent:before {
    z-index: -1;
    content: '';
    position: absolute;

    opacity: 0.2;
    width: 400px;
    height: 200px;
    background: url('http://img42.imageshack.us/img42/1893/96c75664f7e94f9198ad113.png') no-repeat 0 0; 
}

.child{
    Color:black;
}
15

как упоминал том,background-color: rgba(229,229,229, 0.85) может сделать трюк. Поместите это в стиль родительского элемента, и ребенок не будет затронут.

6

вы не можете. Css сегодня просто не позволяет этого.

логическая модель рендеринга такова:

Если объект является элементом контейнера, то эффект таков, как если бы содержимое элемента контейнера было смешано с текущим фоном с помощью маски, где значение каждого пикселя маски .

ссылки : прозрачность css

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

решение с использованием css:скрипка

.parent {
    width:500px;
    height:200px;    
    background-image:url('http://canop.org/blog/wp-content/uploads/2011/11/cropped-bandeau-cr%C3%AAte-011.jpg');
    opacity: 0.2;
}
.child {
    position: fixed;
    top:0;
}

другое решение с javascript:скрипка

4

У меня была та же проблема, и я исправил, установив прозрачное png-изображение в качестве фона для родительского тега.

Это изображение 1px x 1px PNG, которое я создал с непрозрачностью 60% черного фона !

1

вы не можете этого сделать, если вы не берете ребенка из родителя и не помещаете его через позиционирование.

единственный способ, который я знаю, и он действительно работает, это используйте просвечивающее изображение (.PNG с прозрачностью) для фона родителя. Единственный недостаток заключается в том, что вы не можете контролировать непрозрачность через CSS, кроме того, что он работает!

0