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

Question

Можно ли, используя только 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 родительского элемента.

Answer 1

Вы можете использовать чистый CSS 3 : rgba(red, green, blue, alpha), где alpha - необходимый уровень прозрачности. Нет необходимости в JavaScript или jQuery.

Вот пример:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}

Answer 2

<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
    <img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>

http://jsfiddle.net/x2ukko7u/?

Answer 3

Вы можете сделать с rgba color code, используя css, как показано в примере ниже.

.imgbox img{
  height:100px;
  width:200px;
  position:relative;
}
.overlay{
  background:rgba(74, 19, 61, 0.4);
  color:#fff;
  text-shadow:0px 2px 5px #000079;
  height:100px;
  width:300px;
  position:absolute;
  top:10%;
  left:25%;
  padding:25px;
}

<div class"imgbox">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
  <div class="overlay">
    <p>This is Simple Text.</p>
  </div>
</div>

Answer 4

Вы можете использовать RGBA (red, green, blue, alpha) в CSS , что-то вроде этого:

Так что просто сделайте что-нибудь подобное, чтобы сработало в вашем случае:

p {
  position: absolute;
  background-color: rgba(0, 255, 0, 0.6);
}

span {
  color: white;
}

Answer 5

Существует более простое решение - наложить оверлей поверх изображения на тот же элемент div. Это не правильное использование этого инструмента. Но работает, как обаяние, чтобы сделать это наложение с использованием CSS.

Используйте тень от вставки, как это:

box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);

Вот и все:)

Answer 6

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

background-color: rgba(71,158,0,0.8);

Использовать цвет фона с непрозрачностью

цвет фона: RGBA (R, G, В, Непрозрачность);

Answer 7

Я обычно использую этот класс для своей работы. Это довольно хорошо.

.transparent {
  filter: alpha(opacity=50); /* internet explorer */
  -khtml-opacity: 0.5;      /* khtml, old safari */
  -moz-opacity: 0.5;       /* mozilla, netscape */
  opacity: 0.5;           /* fx, safari, opera */
}

Answer 8

Вы можете использовать цвет RGB с непрозрачностью, такой как этот цветовой код в RGB (63,245,0), добавить прозрачность, подобную (63,245,0,0.5), а также добавить RGBA вместо RGB. Использование для непрозрачности

div{
  background:rgba(63,245,0,0.5);
  }