Сделайте фоновое изображение прозрачным, используя CSS

Question

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

Я знаю, как применять прозрачность к цветам фона и элементам уровня блока, но вы можете сделать это для фонового изображения?

Answer 1

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

Обходной путь - создать элемент, который содержит фон и является прозрачным (opacity:0.6; filter:alpha(opacity=60)), а затем плавать или позиционировать контейнер с фактическим содержимым над ним.

Вот пример того, как этот подход будет работать:

#container {
    width: 200px;
    postiion: relative;
  }
  
  #semitrans {
    width: 100%; height: 100px;
    background: #f00;
    opacity: 0.6;
    filter:alpha(opacity=60);
  }
  
  #hello {
    width: 100%; height: 100px;
    position: absolute;
    top: 20px; left: 20px;
  }
  

<div id="container">
    <div id="semitrans"></div>
    <p id="hello">Hello World</p>
</div>

Answer 2

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

Вы, вероятно, можете взломать его, используя изображение вместо фонового изображения, и там есть смесь относительного и абсолютного позиционирования с некоторым z-индексированием сверху.Но это единственный способ, о котором я могу думать!

Answer 3

IE использует filter:alpha(opacity=50);, в то время как другие используют opacity:.5
Просто включите их обоих.