Прозрачность CSS только для цвета фона, а не для текста на нем?

Похоже, вы хотите использовать прозрачный фон, и в этом случае вы можете попробовать использовать _ 1_ функция:

rgba(R, G, B, A)

R (красный), G (зеленый) и B (синий) могут быть либо <integer>s, либо <percentage>s, где число 255 соответствует 100%. A (альфа) может быть <number> между 0 и 1 или <percentage>, где число 1 соответствует 100% (полная непрозрачность).

Пример RGBa

background: rgba(51, 170, 51, .1)    /*  10% opaque green */ 
background: rgba(51, 170, 51, .4)    /*  40% opaque green */ 
background: rgba(51, 170, 51, .7)    /*  70% opaque green */ 
background: rgba(51, 170, 51,  1)    /* full opaque green */ 

Небольшой пример, показывающий, как можно использовать rgba.

По состоянию на 2018 год практически каждый браузер поддерживает синтаксис rgba.

Самый простой способ сделать это - использовать 2 div, 1 с фоном и 1 с текстом:

#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>

Только для пользователей Less:

Если вам не нравится устанавливать цвета с помощью 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%);
}

См. Как сделать Я конвертирую шестнадцатеричный цвет в rgba с помощью компилятора Less?

Моя уловка - создать прозрачный .png с этим цветом и использовать background:url().

Это будет работать с каждым браузером

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. Не влияет на "детей"

У меня такая же проблема. Мне нужен 100% прозрачный цвет фона. Просто используйте этот код; у меня отлично сработало:

rgba(54, 25, 25, .00004);

Вы можете увидеть примеры на левой части этой веб-страницы (область контактной формы).

Отличный способ сделать это - действительно использовать CSS 3.

Создайте класс ширины div - например, суперсайзер вверху страницы:

Затем установите следующие свойства CSS:

  .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, я обнаружил, что следующее меньше всего проблем:

1. Создайте два разных div. Они будут братьями и сестрами, не связанными друг с другом или чем-то еще.
2. Задайте для text div сплошной цвет фона, потому что это будет значение по умолчанию без использования JavaScript.
3. Используйте jQuery, чтобы получить высоту text div и применить ее к background div.

Я уверен, что есть какой-то способ CSS-ниндзя, чтобы все это сделать, используя только поплавки или что-то в этом роде, но у меня не хватило терпения понять это.