Я могу видеть в ссылках CSS, как установить прозрачность изображения и как установить фоновое изображение . Но как я могу объединить эти два, чтобы установить прозрачное фоновое изображение?
У меня есть изображение, которое я хотел бы использовать в качестве фона, но оно слишком яркое - я бы хотел уменьшить непрозрачность до 0,2. Как я могу это сделать?
#main {
background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
}
opacity: ...во всех браузерах, это лучше!источник
:beforeвместо,:afterи тогда я не должен вмешиваться,z-indexпотому:beforeчто автоматически оказывается ниже основного содержания. (В настоящее время тестируется в Chrome и FF.)background-repeat: no-repeat; background-attachment: fixed; background-position: center;в #main: after {...} .Решение с 1 делением и без прозрачного изображения:
Вы можете использовать многоэкземплярную функцию CSS3 и наложить два фона: один с изображением, другой с прозрачной панелью над ним (потому что я думаю, что нет способа напрямую установить непрозрачность фонового изображения):
Вы не можете использовать,
rgba(255,255,255,0.5)потому что только это принимается только сзади, поэтому вы использовали сгенерированные градиенты для каждого браузера для этого примера (вот почему он такой длинный). Но концепция заключается в следующем:http://jsfiddle.net/pBVsD/1/
источник
Простое решение
если вам нужно установить градиент только на background-image :
источник
Я видел это, и в CSS3 вы можете разместить код вот так. Допустим, я хочу, чтобы он охватил весь фон, я бы сделал что-то вроде этого. Затем с помощью
hsla(0,0%,100%,0.70)или rgba вы используете белый фон с любой процентной насыщенностью или непрозрачностью, чтобы получить желаемый вид.источник
Вы можете использовать CSS psuedo selector :: after для достижения этой цели. Вот рабочая демка.
источник
У меня была похожая проблема. У меня было изображение, и я хотел уменьшить прозрачность и иметь черный фон за изображением. Вместо того, чтобы уменьшить непрозрачность или создать черный фон или любой вторичный div, я устанавливаю линейный градиент для изображения на одной строке:
источник
Я использовал ответ @Dan Eastwell, и он работает очень хорошо. Код похож на его код, но с некоторыми дополнениями.
источник
Отличный способ сделать это для простого изображения - использовать только CSS, чтобы установить фон HTML-элемента следующим образом.
Если вы хотите получить фантазию и установить ее непрозрачность, то в IE9 + * вы можете установить прозрачный цвет фона тела. Это работает путем наложения полупрозрачного белого, чтобы сделать изображение более белым и казаться более ярким. Например, белый цвет с непрозрачностью 75% (
rgba(255,255,255,.75)) даст следующий эффект.position: relative, а телоposition: absolute. Это сделано для того, чтобы фоновый цвет тела не вел себя как подсветка текста в теле.Это может быть даже расширено до чего-то, сопоставимого, но все же очень отличного от CSS-фильтров, путем изменения цветового фона RGBA тела. Например,
rgba(0,255,0,.75)создаст очень зеленый оттенок, как вы можете видеть во фрагменте кода.rgba(0,255,0,.75)как что-то наглядное{red:0, green:255, blue:0, alpha:'75%'}.* С полной таблицей совместимости можно ознакомиться в разделе «Могу ли я использовать». Однако обратите внимание, что вам нужно нажать «Показать все», чтобы убедиться, что IE9 поддерживает его.
добавление
Поскольку я уже ответил на вопрос, но я хочу добавить еще кое-что, я озаглавил это дополнение к разделу и добавив в него некоторую потенциально полезную информацию. Таким образом, чтобы еще больше экстраполировать вышеприведенное содержание, вы можете использовать SVG в качестве фонового изображения для создания злых, удивительных вещей. Например, вы можете создать фон загрузочного экрана с изображением классного веб-сайта, как вы можете видеть на примере SVG в кодировке base64 ниже.
background-size: coverCSS заставляет SVG логотип в фоновом режиме , чтобы быть изменен до размера HTML - элемента.источник
В вашем CSS добавить ...
В JavaScript используйте ...
NB: Добавьте префиксы поставщиков по мере необходимости, но без Chromium все будет в порядке.
источник
Что ж, единственный CSS-способ сделать только прозрачность фона - это использовать,
RGBaно так как вы хотите использовать изображение, я бы предложил использовать Photoshop или Gimp, чтобы сделать изображение прозрачным, а затем использовать его в качестве фона.источник
opactiy: 1;не только RGBa.background-imageстиль для контейнера, а затем устанавливаетopacityстиль для того же элемента. Это также сделало бы текст и другое содержимое этого элемента прозрачным. Попробуйте, если не верите мне: w3schools.com/Css/tryit.asp?filename=trycss_transparencyЯ просто добавил position = absolute, top = 0, width = 100% в #main и установил значение непрозрачности на #background
Я применил фон к div перед основным.
источник
Я сталкивался с этим постом, поскольку у меня возникла та же проблема, тогда я подумал, зачем возиться с CSS, настраивая значения и нажимая кнопку Обновить, когда вы можете легко настроить прозрачность в Photoshop? Скопируйте изображение, вставьте его как новый слой, затем переместите ползунок непрозрачности.
источник
У меня была похожая проблема, и я просто взял фоновое изображение в Photoshop и создал новый .png с непрозрачностью, которая мне была нужна. Проблема решена, не беспокоясь о том, работает ли мой CSS на всех устройствах и браузерах
источник