Непрозрачность фона

Я использую нечто похожее на следующий код:

<div style="opacity:0.4; background-image:url(...);">
 <div style="opacity:1.0;">
  Text
 </div>
</div>

Я ожидал, что это сделает фоном непрозрачность 0,4, а текст - 100% непрозрачности. Вместо этого они имеют непрозрачность 0,4.

Ответ 1

Дети наследуют непрозрачность. Было бы странно и неудобно, если бы они этого не сделали.

Вы можете использовать полупрозрачный png для фонового изображения или использовать цвет RGBa (для альфа) для цвета фона.

Пример: 50% выцветший черный фон:

<div style="background-color:rgba(0, 0, 0, 0.5);">
   <div>
      Text added.
   </div>
</div>

Ответ 2

Вы можете использовать CSS 3 :before, чтобы иметь полупрозрачный фон, и вы можете сделать это только с одним контейнером. Используйте что-то вроде этого

<article>
  Text.
</article>

Затем примените CSS

article {
  position: relative;
  z-index: 1;
}

article::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .4; 
  z-index: -1;
  background: url(path/to/your/image);
}

Пример: http://codepen.io/anon/pen/avdsi

Примечание. Возможно, вам придется настроить значения z-index.

Ответ 3

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

Метод прозрачности CSS Aplha (не работает в IE 8)
```
#div{background-color:rgba(255,0,0,0.5);}
```
Используйте прозрачное png-изображение в соответствии с вашим выбором в качестве фона.

Используйте следующий фрагмент кода css для создания альфа-прозрачного фона в кросс-браузере. Вот пример с #000000 @0.4% непрозрачность

.div {  
    background:rgb(0,0,0);  
    background: transparent\9;  
    background:rgba(0,0,0,0.4);  
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);  
    zoom: 1;  
}    
.div:nth-child(n) {  
    filter: none;  
}

Подробнее об этом методе см. this, в котором есть встроенный генератор css.

Ответ 4

Я бы сделал что-то вроде этого

<div class="container">
  <div class="text">
    <p>text yay!</p>
  </div>
</div>

CSS

.container {
    position: relative;
}

.container::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url('/path/to/image.png');
    opacity: .4;
    content: "";
    z-index: -1;
}

Должен работать. Это предполагает, что вам требуется полупрозрачное изображение, а не цвет (для которого вы должны просто использовать rgba). Также предполагается, что вы не можете просто изменить непрозрачность изображения в фотошопе.

Ответ 5

.transbg{/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";}

Ответ 6

Это связано с тем, что внутренний div имеет 100% непрозрачности div, в который он вложен (что имеет непрозрачность 40%).

Чтобы обойти это, вы можете сделать несколько вещей.

вы можете создать два отдельных div, например:

<div id="background"></div>
<div id="bContent"></div>

установите желаемую непрозрачность css и другие свойства для фона hte и используйте свойство z-index (z-index), чтобы создать и разместить bContent div. С помощью этого вы можете поместить div overtope в div div без того, чтобы его непрозрачность сбрасывалась.

Другой вариант - RGBa. Это позволит вам встраивать ваши div и по-прежнему достигать определенной непрозрачности div.

Последний вариант состоит в том, чтобы просто сделать полупрозрачное .png изображение желаемого цвета в желаемом редакторе изображений, установить свойство background-image на URL-адрес изображения, а затем вам не придется беспокоиться о том, как сбрасывать css, теряя возможности и организацию вложенной структуры div.

Ответ 7

Вы можете использовать sass transparentize, я нашел его самым полезным и простым в использовании.

transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6)

Подробнее: http://sass-lang.com/documentation/Sass/Script/Functions.html#transparentize-instance_method

Ответ 8

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

<style>
    .foreground, .background {
        position: absolute;
    }
    .foreground {
        z-index: 1;
    }
    .background {
        background-image: url(your/image/here.jpg);
        opacity: 0.4;
    }
</style>

<div class="foreground"></div>
<div class="background"></div>