Как дать тексту или изображению прозрачный фон с помощью CSS? - PullRequest
Новая
       234

Как дать тексту или изображению прозрачный фон с помощью CSS?

2147 голосов
/ 30 апреля 2009

Можно ли, используя только CSS, сделать background элемента полупрозрачным, но при этом содержимое (текст и изображения) этого элемента непрозрачны?

Я бы хотел сделать это, не имея текста и фона в качестве двух отдельных элементов.

При попытке: 

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
<p>
  <span>Hello world</span>
</p>

Похоже, что дочерние элементы подвергаются непрозрачности своих родителей, поэтому opacity:1 относительно opacity:0.6 родительского элемента.

Ответы [ 28 ]

13 голосов
/ 05 августа 2009

Вот как я это делаю (это может быть неоптимально, но работает):

Создайте div, который вы хотите быть полупрозрачным. Дайте ему класс / идентификатор. Оставьте его пустым и закройте его. Дайте ему заданную высоту и ширину (скажем, 300 на 300 пикселей). Дайте ему непрозрачность 0,5 или что вам нравится, и цвет фона.

Затем, ПРЯМО ПОД НИЖЕ этого div, создайте еще один div с другим классом / id. Создайте абзац внутри, где вы разместите свой текст. Задайте положение div: относительное и верхнее: -295px (это НЕГАТИВНО 295 пикселей). Дайте ему z-индекс 2 для хорошей меры и убедитесь, что его непрозрачность равна 1. Создайте абзац по своему усмотрению, но убедитесь, что размеры меньше, чем у первого div, чтобы он не переполнялся.

Вот и все. Вот код: 

.trans {
  opacity: 0.5;
  height: 300px;
  width: 300px;
  background-color: orange;
}
.trans2 {
  opacity: 1;
  position: relative;
  top: -295px;
}
.trans2 p {
  width: 295px;
  color: black;
  font-weight: bold;
}
<body>
  <div class="trans">
  </div>
  <div class="trans2">
    <p>
      text text text
    </p>
  </div>
</body>

Это работает в Safari 2.x, я не знаю о Internet Explorer.

12 голосов
/ 25 октября 2010

Вот плагин jQuery, который будет обрабатывать все для вас, Transify ( Transify - плагин jQuery для простого применения прозрачности / непрозрачности к фону элемента ).

Время от времени я сталкивался с этой проблемой, поэтому решил написать что-то, что облегчит жизнь. Сценарий занимает менее 2 КБ, и для его работы требуется всего 1 строка кода, а также он будет обрабатывать анимацию прозрачности фона, если хотите.

10 голосов
/ 30 апреля 2009

Непрозрачность фона, но не текста есть некоторые идеи. Либо используйте полупрозрачное изображение, либо наложите дополнительный элемент.

10 голосов
/ 30 апреля 2009

Некоторое время назад я писал об этом в Кросс-браузерная прозрачность фона с помощью CSS .

Bizarrely Internet Explorer 6 позволит вам сделать фон прозрачным и сохранить текст поверх полностью непрозрачным. Для других браузеров я предлагаю использовать прозрачный файл PNG.

9 голосов
/ 07 августа 2014

Если вы Photoshop парень, вы также можете использовать: 

 #some-element {
  background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
 }

Или: 

#some-element {
  background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}
8 голосов
/ 03 июня 2016

Чтобы сделать фон элемента полупрозрачным, но его содержимое (текст и изображения) непрозрачны. Вам нужно написать код CSS для этого изображения и добавить один атрибут с именем opacity с минимальным значением. например, 

.image{
   position: relative;
   background-color: cyan;
  opacity: 0.7;
}

// чем меньше значение, тем прозрачнее, либо меньше - прозрачностью.

7 голосов
/ 09 января 2013

background-color: rgba (255,0,0,0.5); как упомянуто выше, это лучший ответ. Сказать, что использовать CSS3, даже в 2013 году, непросто, поскольку уровень поддержки различных браузеров меняется с каждой итерацией.

Хотя background-color поддерживается всеми основными браузерами (не новы для CSS3) [1] альфа-прозрачность может быть сложной, особенно с Internet Explorer до версии 9 и с цветом рамки в Safari до версии 5.1. [2]

Использование чего-то вроде Compass или SASS действительно может помочь в производстве и кроссплатформенной совместимости.

[1] W3Schools: CSS background-color Property

[2] Блог Нормана: Контрольный список поддержки браузера CSS3 (октябрь 2012 г.)

7 голосов
/ 21 мая 2013

CSS3 имеет простое решение вашей проблемы. Использование: 

background-color:rgba(0,255,0,0.5);

Здесь rgba означает красный, зеленый, синий и альфа-значение. Значение зеленого получается из-за 255, а полупрозрачность получается из альфа-значения 0,5.

6 голосов
/ 03 июня 2015

Если вы используете Меньше , вы можете использовать fade(color, 30%).

4 голосов
/ 06 декабря 2013

Вы можете решить эту проблему для Internet Explorer 8 с помощью (ab), используя синтаксис градиента. Цветовой формат ARGB. Если вы используете препроцессор Sass , вы можете конвертировать цвета, используя встроенную функцию ie-hex-str (). 

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";
Страница:
...