Могу ли я назначить свойство opacity
свойству background
только div
, а не тексту на нем?
Я пробовал:
background: #CCC;
opacity: 0.6;
но это не меняет непрозрачности.
Похоже, вы хотите использовать прозрачный фон, и в этом случае вы можете попробовать использовать функцию rgba ()
:
rgba (R, G, B, A)
R (красный), G (зеленый) и B (синий) могут быть
< integer >
s или< процент >
s, где число 255 соответствует 100%. A (альфа) может быть< number >
между 0 и 1 или< процентное содержание >
, где число 1 соответствует 100% (полная непрозрачность).
Пример RGBa
rgba (51, 170, 51, .1) / 10% непрозрачный зеленый / rgba (51, 170, 51, .4) / 40% непрозрачный зеленый / rgba (51, 170, 51, .7) / 70% непрозрачный зеленый / rgba (51, 170, 51, 1) / полный непрозрачный зеленый /
Небольшой [пример][2], показывающий, как можно использовать rgba
.
По состоянию на 2018 год практически каждый браузер поддерживает синтаксис rgba
.
Самый простой способ сделать это с 2 divs, 1 с фоном и 1 с текстом:
& Лт;!- начать фрагмент: js скрыть: false - >
#container {
position: relative;
width: 300px;
height: 200px;
}
#block {
background: #CCC;
filter: alpha(opacity=60);
/* IE */
-moz-opacity: 0.6;
/* Mozilla */
opacity: 0.6;
/* CSS3 */
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div id="container">
<div id="block"></div>
<div id="text">Test</div>
</div>
& Лт;!- конец фрагмента - >
Только для пользователей Меньше:
Если вы не любите устанавливать свои цвета с помощью RGBA, а используете HEX, есть решения.
Вы можете использовать миксин как:
.transparentBackgroundColorMixin(@alpha,@color) {
background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}
И использовать это как:
.myClass {
.transparentBackgroundColorMixin(0.6,#FFFFFF);
}
На самом деле это то, что встроенная функция Less также обеспечивает:
.myClass {
background-color: fade(#FFFFFF, 50%);
}
Это будет работать с каждым браузером
div {
-khtml-opacity: .50;
-moz-opacity: .50;
-ms-filter: ”alpha(opacity=50)”;
filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity: .50;
}
Если вы не хотите, чтобы прозрачность влияла на весь контейнер и его детей, проверьте этот обходной путь. Для этого у вас должен быть абсолютно позиционированный ребенок с относительно позиционированным родителем. Непрозрачность CSS, которая не влияет на детские элементы
Проверьте рабочую демонстрацию на CSS Opacity, которая не влияет на «детей»
Моя хитрость заключается в создании прозрачного .png с цветом и использовании background: url ()
.
У меня была такая же проблема. Я хочу 100% прозрачный цвет фона. Просто используйте этот код; это отлично сработало для меня:
rgba(54, 25, 25, .00004);
Вы можете увидеть примеры на левой стороне на этой веб-странице (область контактной формы).
Отличный способ сделать это - использовать CSS & nbsp; 3 действительно.
Создайте div width a class - например,. суперсайзер в верхней части вашей страницы:
Затем установите следующие свойства CSS:
& Лт;!- начать фрагмент: js скрыть: false - >
.supersizer {
background: url("http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png") no-repeat center center fixed;
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
opacity: 0.5;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
top: 0;
}
<div class="supersizer"></div>
& Лт;!- конец фрагмента - >
Для тех, кто сталкивается с этой темой, вот сценарий с именем thatsNotYoChild.js, который я только что написал, который автоматически решает эту проблему:
http://www.impressivewebs.com/fixing-parent-child-opacity/
По сути, он отделяет детей от родительского элемента, но сохраняет элемент в том же физическом месте на странице.
Самое простое решение - создать 3 divs
. Тот, который будет содержать два других, тот, что имеет прозрачный фон, и тот, который имеет содержание. Сделайте положение первого div относительным и установите положение с прозрачным фоном на отрицательный z-index
, затем отрегулируйте положение содержимого, чтобы оно соответствовало прозрачному фону. Таким образом, у вас не будет проблем с абсолютным позиционированием.
Использовать:
background:url("location of image"); // Use an image with opacity
Этот метод будет работать во всех браузерах.
Ты не можешь. У вас должен быть отдельный div, который является именно этим фоном, чтобы вы могли применять к нему только непрозрачность.
Я пытался сделать это недавно, и, поскольку я уже использовал jQuery, я обнаружил, что следующее является наименьшим количеством хлопот:
text
div сплошной цвет фона, потому что это будет по умолчанию без JavaScript.text
div, и примените ее к background
div.Я уверен, что есть какой-то способ CSS-ниндзя, чтобы делать все это только с поплавками или чем-то еще, но у меня не было терпения, чтобы понять это.