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

Ответ 1

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

rgba()

Цвета могут быть определены в модели Red-green-blue-alpha (RGBa) с использованием функциональной нотации rgba(). RGBa расширяет цветную модель RGB, чтобы включить альфа-канал, позволяя определять непрозрачность цвета.
a означает непрозрачность: 0 = прозрачный; 1 = непрозрачная;

rgba(255,0,0,0.1)    /* 10% opaque red */  
rgba(255,0,0,0.4)    /* 40% opaque red */  
rgba(255,0,0,0.7)    /* 70% opaque red */  
rgba(255,0,0,  1)    /* full opaque red */ 

Использование образца:

#div {
    background: rgb(54, 25, 25); /* Fall-back for browsers that don't
                                    support rgba */
    background: rgba(54, 25, 25, .5);
}

Демо

Отметьте http://caniuse.com/#search=rgba, чтобы увидеть поддержку браузеров

Ответ 2

Самый простой способ сделать это - 2 divs, 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>

Ответ 3

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

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; 
}

Если вы не хотите, чтобы прозрачность влияла на весь контейнер и его детей, проверьте это обходное решение. Чтобы достичь этого, у вас должен быть абсолютно позиционированный ребенок с относительно позиционированным родителем. http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

Проверьте рабочую демонстрацию на http://www.impressivewebs.com/demo-files/css-opacity/css-opacity-demo.html

Ответ 4

ТОЛЬКО ДЛЯ МЕНЬШЕГО ПОЛЬЗОВАТЕЛЯ:

Если вам не нравится устанавливать цвета с помощью RGBA, но, используя HEX, есть решения.

Вы можете использовать mixin как:

.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%);
}

Смотрите Как преобразовать цвет HEX в rgba с помощью компилятора Less?

Ответ 5

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

Ответ 6

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

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

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

Ответ 7

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

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

затем задайте следующие 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>

Ответ 8

Для всех, кто встречает этот поток, здесь script называется thatsNotYoChild.js, который я только что написал, который автоматически решает эту проблему:

http://www.impressivewebs.com/fixing-parent-child-opacity/

В принципе, он отделяет дочерние элементы от родительского элемента, но сохраняет элемент в том же физическом местоположении на странице.

Ответ 9

Самое простое решение - создать 3 divs. Один из них будет содержать другие 2, один с прозрачным фоном и один с контентом. Сделайте первое относительное положение div и установите значение с прозрачным фоном на отрицательный z-index, затем отрегулируйте положение содержимого, чтобы оно соответствовало прозрачному фону. Таким образом, у вас не будет проблем с абсолютным позиционированием.

Ответ 10

использовать

background:url("location of image");//use an image with opacity

Этот метод будет работать во всех браузерах

Ответ 11

Вы не можете. У вас должен быть отдельный div, который является именно этим фоном, так что вы можете применить к нему непрозрачность.

Я попытался сделать это недавно, и поскольку я уже использовал jQuery, я обнаружил, что нижеследующее - это наименьшая проблема:

• Создайте два разных div. Они будут братьями и сестрами, не содержаться ни в одном, ни в другом.
• Придайте text div сплошной цвет фона, потому что это будет значение по умолчанию без JS.
• Используйте jQuery для получения высоты div text и примените его к div background.

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