Итак, я вижу в ссылках CSS, как установить прозрачность изображения и как установить фоновое изображение. Но как я могу объединить эти два, чтобы установить прозрачное фоновое изображение?
У меня есть изображение, которое я хотел бы использовать в качестве фона, но оно слишком яркое - я хотел бы превратить непрозрачность до 0,2. Как я могу это сделать?
#main {
background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
}
Два метода:
<div>, который position: absolute; до #main и ту же высоту, что и #main, затем примените фоновое изображение и 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), потому что только он принят только на задней панели, поэтому я использовал сгенерированные градиенты для каждого браузера для этого примера (почему он так длинный). Но концепция такова:
background: tranparentColor, url("myImage");
если вам нужно установить только градиент в фоновое изображение:
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;
}<div class="bg-container">
<div class="content">
<h1>Background Opacity 0.4</h1>
</div>
</div>Я использовал ответ @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%;
}Ну, единственный способ сделать только прозрачность фона - через RGBa, но поскольку вы хотите использовать изображение, я бы предложил использовать Photoshop или Gimp, чтобы сделать изображение прозрачным, а затем использовать его в качестве фона.
Так как мне не нравится ни использование png (более тяжелый, чем jpg), ни дополнительный элемент для установки непрозрачности, и учитывая, что это будет презентационным улучшением, я предлагаю попробовать JPEG с альфа-каналами, метод, использующий холст.
Возможно, это может быть хорошая техника для реализации, даже я не знаю, применима ли она в вашем конкретном случае.
Я только что добавил 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 по всем устройствам и браузерам.