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

этот вопрос уже есть ответ здесь:

могу ли я назначить opacity свойства background свойство a div только и не текст на нем?

Я пробовал:

background: #CCC;
opacity: 0.6;

но это не измените непрозрачность.

11 ответов


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

rgba(R, G, B, A)

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

RGBA и пример

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

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

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


самый простой способ сделать это с 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%);
}

посмотреть как преобразовать цвет HEX в rgba с меньшим компилятором?


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


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

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

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


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

создайте div width A class-например, 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. создайте два разных divs. Они будут братьями и сестрами, не содержащимися друг в друге.
  2. дать text div сплошной цвет фона, потому что это будет JS-менее по умолчанию.
  3. используйте jQuery, чтобы получить text высота div и применить его к background div.

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