Как установить изображение полупрозрачным?
За управление прозрачностью элемента на странице отвечает стилевое свойство opacity , которое относится к CSS3. В качестве значения применяются дробные числа от 0 до 1, где ноль соответствует полной прозрачности, а единица, наоборот, непрозрачности объекта.
Старые версии Internet Explorer не поддерживает opacity , поэтому для этого браузера следует использовать специфическое свойство filter со значением alpha(Opacity=X) , где под X подразумевается целое число от 0 до 100. Это значение определяет уровень прозрачности: 0 — полная прозрачность; 100 — наоборот, непрозрачность объекта.
Соединяя воедино два свойства, получим универсальный код, который устанавливает заданную прозрачность для изображений (пример 1).
Пример 1. Полупрозрачное изображение
HTML5 CSS 2.1 CSS3 IE Cr Op Sa Fx
Прозрачность .transparent75 < filter: alpha(Opacity=75); /* Полупрозрачность для IE */ opacity: 0.75; /* Полупрозрачность для других браузеров */ >.transparent50 < filter: alpha(Opacity=50); opacity: 0.5; >.transparent25 
Результат примера показан на рис. 1.
Рис. 1. Фотография с различными значениями прозрачности
В данном примере вначале приводится исходная фотография, к которой не применяются настройки прозрачности, последующие фотографии отображаются с уровнем непрозрачности 75%, 50% и 25%.
Как можно поменять прозрачность background-image не меняя прозрачности остального содержимого блока?
Как можно поменять прозрачность картинки через opacity заданной с помощью background-image не меняя при этом прозрачности всего остального содержимого div ? К примеру:
Текст
Меняя opacity класса «block» естественно будет меняться opacity и заголовка в том числе, но нужно только background-image
Отслеживать
задан 21 мая 2018 в 14:02
75 1 1 золотой знак 3 3 серебряных знака 11 11 бронзовых знаков
покажите ваш код . дальше будет видно
21 мая 2018 в 14:05
5 ответов 5
Сортировка: Сброс на вариант по умолчанию
Такого свойства как background-opacity нет, но есть такая альтернатива: можно заменить background псевдоэлементом, и применить opacity уже к нему.
div < width: 200px; height: 200px; display: block; position: relative; >div::after < content: ""; background: url(http://calculate-this.com/sites/default/files/styles/large/public/field/image/cat-3-icon.png?itok=w4QTmWF4); opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; >Отслеживать
ответ дан 21 мая 2018 в 14:20
86 3 3 бронзовых знака
.block < width:300px; height: 200px; position: relative; background:url(http://on-desktop.com/wps/Nature___Fields_Hilly_landscape_042589_.jpg); >.block2 < position: relative; left:40px; top:-140px; width:300px; height: 200px; z-index:1; >.block2::before < content:""; opacity: 0.5; position: absolute; z-index:-1; top: 0; left: 0; bottom: 0; right: 0; background:url(http://on-desktop.com/wps/Nature___Fields_Hilly_landscape_042589_.jpg); background-size:cover; > foo bar baku reku Отслеживать
ответ дан 21 мая 2018 в 14:16
user245150 user245150
можно же inherit не обязательно указывать url
21 мая 2018 в 14:26
@МаксимЛенский, inherit не будет работать в таком случае. Так как оно наследует свойство от родительского элемента. У block2 нет background , соответственно нечего наследовать.
21 мая 2018 в 14:40
@Arthur смотри мой пример .
21 мая 2018 в 14:40
@МаксимЛенский, ты не понял. block1 & block2 существуют отдельно. В примере Duoxx’a псевдоэлемент у block2 , в котором не может работать наследование.
21 мая 2018 в 14:43
@МаксимЛенский, я про это и говорю=)
21 мая 2018 в 14:45
Если это просто какой-то цвет, то можно задать его с помощью rgba .
text А если картинка, то никак. Можно воспользоваться png фоном, либо сделать замену, когда нужно, например если экран стал маленький и нужно сделать фон прозрачным, то можно использовать media и просто подменить на картинку с нужной прозрачностью.
Хотя думаю, что найдутся какие-нибудь костыльные варианты
Отслеживать
ответ дан 21 мая 2018 в 14:13
uzi_no_uzi uzi_no_uzi
2,186 2 2 золотых знака 17 17 серебряных знаков 50 50 бронзовых знаков
Ну как костыль вариант Duoxx с абсолютным позиционированием который пришел мне в голову. Если картинка то я думаю перенести содержимое блока в соседний блок лучшее решение.
21 мая 2018 в 14:21
@Telion, да, я тоже об этом подумал.
21 мая 2018 в 14:22
К примеру, если фон из фото и надо его сделать прозрачным можно поступить этим способом
* < margin: 0; padding: 0; >.item < width: 100vw; height: 100vh; background: url(http://nevseoboi.com.ua/uploads/posts/2012-02/1328215556-496551-0031795_www.nevseoboi.com.ua.jpg); background-size: 0 0; position: relative; padding-top: 20px; >.item:before < content: ""; display: block; width: inherit; height: inherit; position: absolute; top: 0; left: 0; background: inherit; background-size: cover; opacity: .4; >.item p
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore veniam similique libero adipisci officia unde, est neque harum. Corrupti ut consequatur totam maiores eveniet amet doloremque voluptatibus nostrum eaque nam dignissimos recusandae fuga ab, deleniti quo eligendi, repellat ea fugiat nesciunt reiciendis. Hic deleniti praesentium maxime esse consequuntur ut nesciunt!
CSS: Прозрачность
Для создания эффекта прозрачности в CSS используется свойство opacity.
Браузер IE8 и более ранние его версии поддерживают альтернативное свойство — filter:alpha(opacity=x) , где » x » может принимать значение от 0 до 100 , чем меньше значение, тем прозрачнее будет элемент.
Все остальные браузеры поддерживают стандартное CSS свойство opacity , которое может принимать в качестве значения числа от 0.0 до 1.0 , чем меньше значение, тем прозрачнее будет элемент:
Прозрачность при наведении
Псевдо-класс :hover позволяет изменять внешний вид элементов при наведении на них курсора мыши. Мы воспользуемся этой возможностью, чтобы изображение при наведении мыши теряло свою прозрачность:
Прозрачность фона
Есть два возможных способа сделать элемент прозрачным: свойство opacity , описанное выше, и указание цвета фона в RGBA формате.
Возможно вы уже знакомы с моделью представления цвета в формате RGB . RGB (Red, Green, Blue — красный, зеленый, синий) — цветовая система, определяющая оттенок путем смешивания красного, зеленого и синего цветов. Например, для задания желтого цвета для текста можно воспользоваться любым из следующих объявлений:
color: rgb(255,255,0); color: rgb(100%,100%,0);
Цвета, заданные с помощью RGB , будут отличаться от шестнадцатеричных значений, используемых нами до этого тем, что позволяют использовать альфа-канал прозрачности. Это значит, что сквозь фон элемента с альфа-прозрачностью будет видно то, что располагается под ним.
Объявление цвета RGBA схоже по синтаксису со стандартными правилами RGB . Однако, кроме всего прочего, нам потребуется объявить значение как RGBA (вместо RGB ) и задать дополнительное десятичное значение прозрачности после значения цвета в промежутке от 0.0 (полная прозрачность) до 1 (полная непрозрачность).
color: rgba(255,255,0,0.5); color: rgba(100%,100%,0,0.5);
Разница между свойством opacity и RGBA заключается в том, что свойство opacity применяет прозрачность ко всему элементу целиком, то есть все содержимое элемента становится прозрачным. А RGBA позволяет задать прозрачность отдельным частям элемента (например, только тексту или фону):
body < background-image: url(img.jpg); >.prim1 < width: 400px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; font-weight: bold; opacity: 0.5; filter: alpha(opacity=70); /*для IE8 и более ранних версий*/ text-align: center; >.prim2
Примечание: значения RGBA не поддерживаются в браузере IE8 и более ранних версиях. Для объявления резервного варианта цвета для старых браузеров, не поддерживающих значения цветов с альфа-каналами, следует указать его первым до значения RGBA :
background: rgb(255,255,0); background: rgba(255,255,0,0.5);
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru
Изменение прозрачности фонового изображения CSS
С CSS и CSS3 можно сделать много интересных вещей, но установка непрозрачного фона CSS не входит в их число. Однако существует очень много творческих подходов, которые могут помочь добиться эффекта изменения прозрачности фонового изображения CSS. Оба приведенных ниже метода имеют отличную поддержку браузеров вплоть до Internet Explorer 8.
Метод 1. Использование абсолютного позиционирования и изображения
Название этого метода описывает его содержание. Вы просто используете абсолютное позиционирование для нормального тега img и делаете его таким, как если бы вы использовали свойство CSS background-image . Для этого достаточно поместить изображение в контейнер position: relative; . Вот так обычно выглядит разметка HTML:
div class="demo_wrap"> h1>Hello World!h1> img src="https://assets.digitalocean.com/labs/images/community_bg.png"> div> Вот так выглядит код CSS:
.demo_wrap position: relative; overflow: hidden; padding: 16px; border: 1px dashed green; > .demo_wrap h1 padding: 100px; position: relative; z-index: 2; > .demo_wrap img position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0.6; > Здесь важно обеспечить абсолютное позиционирование изображения и растянуть его так, чтобы оно заполнило весь родительский контейнер. При этом важно относительное позиционирование всех элементов, чтобы вы могли установить индекс z-index , поднимающий их над изображением.
Ниже приведена демонстрация:
Hello World!
Метод 2. Использование псевдоэлементов CSS
Этот метод с первого взгляда выглядит простым, и я его определенно предпочитаю. Используя псевдоэлементы CSS :before или :after , вы устанавливаете div с фоновым изображением и задаете для него прозрачность. При этом разметка HTML будет выглядеть примерно так:
div class="demo_wrap"> h1>Hello World!h1> div> Вот так выглядит код CSS:
.demo_wrap position: relative; background: #5C97FF; overflow: hidden; > .demo_wrap h1 padding: 50px; position: relative; z-index: 2; > /* You could use :after - it doesn't really matter */ .demo_wrap:before content: ' '; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.6; background-image: url('https://assets.digitalocean.com/labs/images/community_bg.png'); background-repeat: no-repeat; background-position: 50% 0; background-size: cover; >
Здесь нам снова нужно переместить z-index содержимого (в данном случае ) над псевдоэлементом background, и мы должны явно определить position: absolute; и z-index: 1 на псевдоэлементе :before .
Остальные атрибуты псевдоэлемента располагают его так, чтобы он на 100% перекрывал родительский элемент, а также используют новое полезное свойство CSS: background-size: cover , которое определяет размер фона для покрытия элемента без изменения пропорций. Ниже приведена прекрасная демонстрация этого метода:
Hello World!
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.