CSS непрозрачность только цвет фона не текст на нем? [дубликат]

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

Это будет работать с любым браузером

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

на меньше только для пользователей:

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

вы могли бы использовать миксин, как:

.transparentBackgroundColorMixin(@alpha,@color) {
  background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}

и использовать его как

.myClass {
    .transparentBackgroundColorMixin(0.6,#FFFFFF);
}

на самом деле это встроенный меньше функции предоставляем:

.myClass {
    background-color: fade(#FFFFFF, 50%);
}

посмотреть Как конвертировать шестнадцатеричный цвет в rgba с меньшим компилятором?

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

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

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

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

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

создайте класс div width a-например, 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>

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

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

в принципе, он отделяет детей от родительского элемента, но сохраняет элемент в том же месте на странице.

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

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

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

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

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

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

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

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