Я использую что-то похожее на следующий код:
<div style="opacity:0.4; background-image:url(...);">
<div style="opacity:1.0;">
Text
</div>
</div>
Я ожидал, что фон будет иметь непрозрачность 0,4, а текст - непрозрачность 100%. Вместо этого они оба имеют непрозрачность 0,4.
Дети наследуют непрозрачность. Было бы странно и неудобно, если бы они этого не делали.
Вы можете использовать полупрозрачный PNG-файл для фонового изображения или использовать цвет RGBa (a - альфа) для цвета фона.
Например, 50% блеклый черный фон:
<div style="background-color:rgba(0, 0, 0, 0.5);">
<div>
Text added.
</div>
</div>
Вы можете использовать CSS 3 :до
, чтобы иметь полу-прозрачный фон, и вы можете сделать это с помощью только одного контейнера. Использовать что-то вроде этого
<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-индекса
.
Следующие методы могут использоваться, чтобы решить вашу проблему:
Использовать прозрачные PNG изображения по вашему выбору в качестве фона.
Используйте следующий CSS-код фрагмент кода, чтобы создать кросс-браузер Альфа-прозрачный фон. Вот пример с #000000
@ 0.4% непрозрачность
.див { фон:цвет RGB(0,0,0); фон: прозрачный\9; фон:формате RGBA(0,0,0,0.4); фильтр:идентификатор progid:DXImageTransform.Майкрософт.градиент(startColorstr=#66000000,endColorstr=#66000000); зум: 1; } .див через:nth-ребенок(Н) { фильтр: нет; }
Для получения более подробной информации в отношении этого метода см. В этом, который имеет генератор онлайн в CSS.
Я бы сделал что-то вроде этого
<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;
}
Это должно сработать. Это при условии, что от вас требуется полупрозрачное изображение BTW, а не цвет (для которого вы должны использовать rgba). Также предполагается, что вы не можете просто изменить непрозрачность изображения заранее в Photoshop.
Вы можете использовать Сасс' 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)
Подробнее см.: #transparentize($цвета, $сумма) ⇒ Сасс::сценарий::стоимости::цвет
.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)";}
Это происходит потому, что внутренний div имеет 100% непрозрачности от непрозрачности div, в который он вложен (который имеет 40% непрозрачности).
Чтобы обойти это, можно сделать несколько вещей.
Вы можете создать два отдельных div, например, так:
<div id="background"></div>
<div id="bContent"></div>
Установите желаемую непрозрачность CSS и другие свойства для фона и используйте свойство z-index (z-index) для стилизации и позиционирования div bContent. Таким образом, вы можете разместить div поверх фонового div без изменения его непрозрачности.
Другой вариант - RGBa. Это позволит вам вложить ваши div'ы и при этом добиться определенной непрозрачности div'а.
Последний вариант - это просто создать полупрозрачное изображение .png нужного вам цвета в выбранном вами редакторе изображений, установить свойство background-image на URL изображения, и тогда вам не придется беспокоиться о том, чтобы возиться с CSS и терять возможности и организацию вложенной структуры div.
Просто убедитесь, что поставить ширину и высоту изображения так же с фоном, или попробовать для верхней, нижней, левой и правой "свойства".
<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>