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

Ответ 1

Может быть, хорошо, если вы определяете фоновое изображение в псевдо-классе :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;
}

Отметьте fiddle

Ответ 2

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

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

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

Ответ 3

Вы можете сделать это с псевдоэлементами: (demo on dabblet.com)

ваша разметка:

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

Ответ 4

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

Ответ 5

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

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

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

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

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

Решение с использованием css: fiddle

.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: fiddle

Ответ 6

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

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

Ответ 7

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

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