Вопрос по css, css3 – Как установить непрозрачность в родительском div и не повлиять на дочерний div? [Дубликат]

68

This question already has an answer here:

I do not want to inherit the child opacity from the parent in CSS 14 answers

Эй, я ищу в Google, но не могу найти идеальный ответ

Я хочу, чтобы Непрозрачность в родительском DIV, но не Child 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;
}

Note: -- я бы хотелbackground-image вParent Div не цвет

Привет @DavidThomas Как вы можете сказать, что этот вопрос является дубликатом, если у вас есть какие-либо ответы, связанные с этими вопросами без использования позиции и используется для фоновых изображений в родительском div в чистом CSS ............. Rohit Azad
Предварительно отредактируйте это, казалось, было; Я прочитал вопрос в мобильном телефоне, а затем, чтобы найти дубликаты, переключился на рабочий стол. Я не перечитывал твой вопрос время от времени. Мое близкое голосование исчезнет, так что не беспокойтесь об этом. David Thomas

Ваш Ответ

7   ответов
0

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

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

почему негатив?
41

background-image в: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;
}

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

@VladimirStarkov, когда я даю свой ответ, я не видел вашего ответа :)
@sandeep спасибо за точный ответ, который мы полностью запутали в этой ошибке ...... спасибо, приятель ...... Rohit Azad
@AshwinP Спасибо, что ваши решения кажутся точными.
мой ответ очень похож на ваш, но я не могу представить, что не так с моим
использованиеbackground-color: rgba(255,255,255,0.3); вместо непрозрачности. Это не будет наследством.
75

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

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

... и это не влияет на другие цвета фона в дочерних элементах div (просто краткое примечание)
Неправильно добавлять жестко закодированный встроенный стиль. Пожалуйста, не делитесь этим.
6

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

1

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

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

15

Выcan do it с псевдоэлементами :(демо на dabblet.com) enter image description here

your markup:

<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;
}
@RohitAzad, почему это так важно?
+1 for your answer you were also near about my requirement actually you didn't define the width height in your parent so that's why i was bit confused in your anwers byw thanks....... – Rohit Azad Jun 4 '12 at 10:19 Rohit Azad
@RohitAzad я определил его только для псевдоэлемента для большей гибкости
эй @Вламимир Старков я не использовал позицию ............... Rohit Azad
5

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

If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is .

Ссылка :прозрачность 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:играть на скрипке

Спасибо, но это только фоновый цвет, а не фоновые изображения ............. Rohit Azad
Можете ли вы дать мне пример на jsfiddle.net Rohit Azad
Я только что добавил один.
То же самое для изображений.
Я поддерживаю это, потому что я возвращался к этому вопросу несколько раз, и каждый раз я отказываюсь от решений с самым высоким рейтингом. Конечно, они работают, но каждый раз я использую фон PNG размером 1 пиксель. Я сделал это примерно 5 раз. Так что, да, как говорится в этом ответе, похоже, что CSS не слишком хорош в этом. Надеюсь, я найду этот комментарий в следующий раз, когда буду обдумывать это.

Похожие вопросы