Поддерживать непрозрачность CSS Внутренний элемент

У меня есть div, определенный внутри div, внешний div имеет определенную непрозрачность, это приводит к внутреннему элементу, z-индекс которого выше, чем его контейнер, выглядит dim.IS, внутренний div выглядит тусклым, хотя внешний div является div.Поддерживать непрозрачность CSS Внутренний элемент

Вот код

<body> 
<style> 
    #cont{ background-color:yellow; width:900px; height:900px; margin:auto; padding:40px; position:relative; } 

#top{ position:relative; background-color:orange; width:100%; padding:10px; } 

#cont1{ background-color:black; width:800px; padding:20px; box-sizing:border-box; position:relative; z-index:3; opacity:0.4; } 

#cont1_text{color:white; z-index:4; opacity:10; padding:20px; top:10px; } 

#cont2{ background-color:blue; width:800px; padding:20px; box-sizing:border-box; position:relative; z-index:3; } 

#butt{ position:relative; clear:both; } 

</style> 
<div id="cont"> 

    <div id="cont1"> 
      <div id="cont1_text"> 

    The Last line of above code still shows the length of the array is 4, even though a element is deleted.HOW?? 
    Well, the delete method just deletes the value from the defined position but the position still remains.It’s just like drinking coke, the liquid is gone after drinking(deleting) but the bottle remains. This creates a hole or leaves an empty space in the array. 

    </div> 
    </div> 

    <div id="cont2"> 
    </div> 
</div> 
</body>

Один способа я знаю достижение желаемого результата является не помещая внутренний DIV внутри внешних дел. Затем текст, содержащий div, помещается над контейнером div, сохраняя положение, верхний, левый и т. Д. Но проблема здесь заключается в том, что высота контейнера не будет возрастать в соответствии с длиной текста, поскольку div, содержащий текст, не находится внутри div контейнера.

выход и редактировать можно здесь https://jsfiddle.net/sum1/av6r0aug/

источник

2015-02-23 Chelsea

Я ответил на аналогичный вопрос некоторое время назад: http://stackoverflow.com/questions/27818804/setting-inner- div-opacity-to-1-but-not-effected –

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

Почему?

потому, что в соответствии с непрозрачностью MDN

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

Итак, см ниже фрагмент кода:

#cont { 
 
    background-color: yellow; 
 
    width: 900px; 
 
    height: 900px; 
 
    margin: auto; 
 
    padding: 40px; 
 
    position: relative; 
 
    } 
 
    #top { 
 
    position: relative; 
 
    background-color: orange; 
 
    width: 100%; 
 
    padding: 10px; 
 
    } 
 
    #cont1 { 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    width: 800px; 
 
    padding: 20px; 
 
    box-sizing: border-box; 
 
    position: relative; 
 
    z-index: 3; 
 
    } 
 
    #cont1_text { 
 
    color: white; 
 
    z-index: 4; 
 
    opacity: 10; 
 
    padding: 20px; 
 
    top: 10px; 
 
    } 
 
    #cont2 { 
 
    background-color: blue; 
 
    width: 800px; 
 
    padding: 20px; 
 
    box-sizing: border-box; 
 
    position: relative; 
 
    z-index: 3; 
 
    } 
 
    #butt { 
 
    position: relative; 
 
    clear: both; 
 
    }

<div id="cont"> 
 
    <div id="cont1"> 
 
    <div id="cont1_text">The Last line of above code still shows the length of the array is 4, even though a element is deleted.HOW?? Well, the delete method just deletes the value from the defined position but the position still remains.It’s just like drinking coke, the 
 
     liquid is gone after drinking(deleting) but the bottle remains. This creates a hole or leaves an empty space in the array.</div> 
 
    </div> 
 
    <div id="butt"> 
 
    <div id="cont2"></div> 
 
    <div id="cont2_text"></div> 
 
    </div> 
 
</div>

источник

2015-02-23 12:03:59 dippas

Хорошо, это действительно хорошая идея, но есть другой способ, кроме этого, где я могу полностью использовать непрозрачность и, кстати, этот способ действительно полезен. – Chelsea

в соответствии с [MDN] (https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) это невозможно. «Значение применяется к элементу в целом, включая его содержимое, даже если значение не наследуется дочерними элементами. Таким образом, элемент и его содержащиеся дочерние элементы имеют одинаковую непрозрачность относительно фона элемента, даже если элемент и его дети имеют разные непрозрачности относительно друг друга ». – dippas

Поддерживать непрозрачность CSS Внутренний элемент

ответ

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