CSS: установить фоновое изображение с непрозрачностью?

Итак, я вижу в ссылках CSS, как установить прозрачность изображения и как установить фоновое изображение . Но как я могу объединить эти два, чтобы установить прозрачное фоновое изображение?

У меня есть изображение, которое я хотел бы использовать в качестве фона, но оно слишком яркое – я хотел бы превратить непрозрачность до 0,2. Как я могу это сделать?

#main { background-image: url(/wp-content/uploads/2010/11/tandem.jpg); } 

Два метода:

  1. Преобразуйте в PNG и сделайте исходное изображение 0.2 непрозрачность
  2. (Лучший метод) имеет

    который является position: absolute; до #main и той же высоты, что и #main , затем примените фоновое изображение и opacity: 0.2; filter: alpha(opacity=20); opacity: 0.2; filter: alpha(opacity=20); ,

 #main { position: relative; } #main:after { content : ""; display: block; position: absolute; top: 0; left: 0; background-image: url(/wp-content/uploads/2010/11/tandem.jpg); width: 100%; height: 100%; opacity : 0.2; z-index: -1; } 

Решение с 1 div и NO прозрачным изображением:

Вы можете использовать функцию multibackground CSS3 и поместить два фонов: один с изображением, другой с прозрачной панелью над ним (потому что я думаю, что нет возможности напрямую установить непрозрачность фонового изображения):

 background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(bg.png) repeat 0 0, url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0; background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.7))), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0; background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0; background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0; background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0; background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0; 

Вы не можете использовать rgba(255,255,255,0.5) потому что только он принимается только на обратной стороне, поэтому вы использовали сгенерированные gradleиенты для каждого браузера для этого примера (поэтому он так длинный). Но концепция такова:

 background: tranparentColor, url("myImage"); 

http://jsfiddle.net/pBVsD/1/

если вам нужно установить только gradleиент в фоновое изображение :

 background-image: url(IMAGE_URL); /* fallback for older browsers */ background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%), url(IMAGE_URL); 

Я видел это и в CSS3 теперь вы можете разместить код таким образом. Допустим, я хочу, чтобы он охватывал весь фон, я бы сделал что-то подобное. Затем с помощью hsla(0,0%,100%,0.70) или rgba вы используете белый фон с любой процентной насыщенностью или непрозрачностью, чтобы получить желаемый вид.

 .body{ background-attachment: fixed; background-image: url(../images/Store1.jpeg); display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background-color: hsla(0,0%,100%,0.70); background-blend-mode: overlay; background-repeat: no-repeat; } 

Вы можете использовать CSS psuedo selector :: after для достижения этого. Вот рабочая демонстрация.

введите описание изображения здесь

 .bg-container{ width: 100%; height: 300px; border: 1px solid #000; position: relative; } .bg-container .content{ position: absolute; z-index:999; text-align: center; width: 100%; } .bg-container::after{ content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index:99; background-image: url(https://i.stack.imgur.com/Hp53k.jpg); background-size: cover; opacity: 0.4; } 
 

Background Opacity 0.4

Я использовал ответ @Dan Eastwell, и он работает очень хорошо. код похож на его код, но с некоторым добавлением

  .granddata { position: relative; margin-left :0.5%; margin-right :0.5%; } .granddata:after { content : ""; display: block; position: absolute; top: 0; left: 0; background-image: url("/Images/blabla.jpg"); width: 100%; height: 100%; opacity : 0.2; z-index: -1; background-repeat: no-repeat; background-position: center; background-attachment:fixed; } 

В CSS добавить …

  filter: opacity(50%); 

В JavaScript использовать …

  element.style.filter='opacity(50%)'; 

NB: добавьте префиксы поставщиков по мере необходимости, но Chromium должен быть в порядке.

Отличный способ сделать это для простого изображения – это сделать это, используя только CSS, чтобы установить фон элемента HTML так.

 HTML { background: url('http://www.earthtimes.org/newsimage/eat-lead-by-example-obesity-expert-tells-parents_139.jpg'); width: 100%; height: 100%; } 

Ну, единственный способ CSS сделать только прозрачность фона – через RGBa но так как вы хотите использовать изображение, я бы предложил использовать Photoshop или Gimp, чтобы сделать изображение прозрачным, а затем использовать его в качестве фона.

Поскольку мне не нравится ни использование png (возможно, тяжелее, чем jpg), ни дополнительный элемент для установки непрозрачности, и учитывая, что это будет презентационным улучшением, я предлагаю попробовать JPEG с помощью Alpha Channels – метода, использующего canvas.

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

Я просто добавил position = absolute, top = 0, width = 100% в #main и задал значение непрозрачности для #background

 #main{height:100%;position:absolute; top:0;width:100%} #background{//same height as main;background-image:url(image URL);opacity:0.2} 

Я применил фон к div перед основным.

Я столкнулся с этим сообщением, так как у меня была такая же проблема, тогда я подумал, зачем обходиться с помощью css, корректируя значения и обновляя обновления, когда вы можете легко настроить непрозрачность в Photoshop? Скопируйте изображение, вставьте его как новый слой, затем переместите ползунок непрозрачности.

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

  • Google Chrome: просмотр фонового изображения не работает
  • Почему этот встроенный блок блокируется вниз?
  • CSS 3 Форма: «Обратный круг» или «Вырезать круг»
  • Почему пространства, используемые для разделения вещей в css
  • CSS3, объединяющий селекторы с OR вместо AND
  • Прозрачность CSS3 + gradleиент
  • Какие символы действительны в именах / селекторах classов CSS?
  • Пограничный радиус в процентах (%) и пикселях (px) или em
  • Изменение цвета панели firefox с помощью userChrome.css
  • jQuery переопределить отображение сообщения об ошибке проверки по умолчанию (Css) Всплывающее / всплывающее окно
  • Проблемы с размером шрифта, сравнивающие хром и Firefox
  • Давайте будем гением компьютера.