Как сделать прозрачный фон у картинки css
Перейти к содержимому

Как сделать прозрачный фон у картинки css

  • автор:

Как сделать прозрачный фон у картинки css

Передайте смысл с помощью background-color и добавьте украшения с помощью градиентов.

На этой странице

Фоновый цвет

Как и в цветовых классах контекстуального текста, задавайте фон любому контекстуальному классу. Компоненты ссылки будут затемняться по наведению, как и классы текста. В утилитах фона не задается атрибут color , так что в некоторых случаях вам понадобится утилиты .text-* .

.bg-secondary
.bg-transparent

div class="p-3 mb-2 bg-primary text-white">.bg-primarydiv> div class="p-3 mb-2 bg-secondary text-white">.bg-secondarydiv> div class="p-3 mb-2 bg-success text-white">.bg-successdiv> div class="p-3 mb-2 bg-danger text-white">.bg-dangerdiv> div class="p-3 mb-2 bg-warning text-dark">.bg-warningdiv> div class="p-3 mb-2 bg-info text-dark">.bg-infodiv> div class="p-3 mb-2 bg-light text-dark">.bg-lightdiv> div class="p-3 mb-2 bg-dark text-white">.bg-darkdiv> div class="p-3 mb-2 bg-body text-dark">.bg-bodydiv> div class="p-3 mb-2 bg-white text-dark">.bg-whitediv> div class="p-3 mb-2 bg-transparent text-dark">.bg-transparentdiv>

Фоновый градиент

При добавлении класса .bg-gradient к фону добавляется линейный градиент в качестве фонового изображения. Этот градиент начинается с полупрозрачного белого цвета, который постепенно исчезает к низу.

Вам нужен градиент в вашем собственном CSS? Просто добавьте background-image: var(—bs-gradient); .

.bg-primary.bg-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient

Непрозрачность

Начиная с версии 5.1.1, утилиты background-color генерируются с помощью Sass с использованием переменных CSS. Это позволяет изменять цвет в реальном времени без компиляции и динамических изменений альфа-прозрачности.

Как это устроено

Рассмотрим нашу стандартную утилиту .bg-success .

.bg-success  --bs-bg-opacity: 1; background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important; > 

Мы используем RGB-версию нашей переменной CSS —bs-success (со значением 25, 135, 84 ) и добавляем вторую переменную CSS, —bs-bg-opacity , для альфа-прозрачности. (со значением по умолчанию 1 благодаря локальной переменной CSS). Это означает, что каждый раз, когда вы сейчас используете .bg-success , вашим вычисленным значением color будет rgba(25, 135, 84, 1) . Локальная переменная CSS внутри каждого класса .bg-* позволяет избежать проблем с наследованием, поэтому вложенные экземпляры утилит не имеют автоматически измененной альфа-прозрачности.

Пример

Чтобы изменить эту непрозрачность, переопределите —bs-bg-opacity с помощью пользовательских стилей или встроенных стилей.

Это фон успеха по умолчанию
Это успешный фон с непрозрачностью 50%

div class="bg-success p-2 text-white">Это фон успеха по умолчаниюdiv> div class="bg-success p-2" style="--bs-bg-opacity: .5;">Это успешный фон с непрозрачностью 50%div>

Или выберите любую из утилит .bg-opacity :

Это фон успеха по умолчанию
Это успешный фон с непрозрачностью 75%
Это успешный фон с непрозрачностью 50%
Это успешный фон с непрозрачностью 25%
Это успешный фон с непрозрачностью 10%

div class="bg-success p-2 text-white">Это фон успеха по умолчаниюdiv> div class="bg-success p-2 text-white bg-opacity-75">Это успешный фон с непрозрачностью 75%div> div class="bg-success p-2 text-dark bg-opacity-50">Это успешный фон с непрозрачностью 50%div> div class="bg-success p-2 text-dark bg-opacity-25">Это успешный фон с непрозрачностью 25%div> div class="bg-success p-2 text-dark bg-opacity-10">Это успешный фон с непрозрачностью 10%div>

Sass

В дополнение к следующей функциональности Sass, рассмотрите возможность чтения о наших включенных настраиваемых свойствах CSS (также известных как переменные CSS) для цветов и многого другого.

Переменные

Большинство утилит background-color генерируются цветами нашей темы, переназначенными из переменных нашей общей цветовой палитры.

$blue: #0d6efd; $indigo: #6610f2; $purple: #6f42c1; $pink: #d63384; $red: #dc3545; $orange: #fd7e14; $yellow: #ffc107; $green: #198754; $teal: #20c997; $cyan: #0dcaf0; 
$primary: $blue; $secondary: $gray-600; $success: $green; $info: $cyan; $warning: $yellow; $danger: $red; $light: $gray-100; $dark: $gray-900; 
$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)); 

Также доступны оттенки серого, но для создания каких-либо утилит используется только подмножество.

$white: #fff; $gray-100: #f8f9fa; $gray-200: #e9ecef; $gray-300: #dee2e6; $gray-400: #ced4da; $gray-500: #adb5bd; $gray-600: #6c757d; $gray-700: #495057; $gray-800: #343a40; $gray-900: #212529; $black: #000; 

Карта

Затем цвета темы помещаются в карту Sass, чтобы мы могли перебирать их, чтобы сгенерировать наши утилиты, модификаторы компонентов и многое другое.

$theme-colors: ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark ); 

Цвета в градациях серого также доступны в виде карты Sass. Эта карта не используется для создания каких-либо утилит.

$grays: ( "100": $gray-100, "200": $gray-200, "300": $gray-300, "400": $gray-400, "500": $gray-500, "600": $gray-600, "700": $gray-700, "800": $gray-800, "900": $gray-900 ); 

Миксины

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

@mixin gradient-bg($color: null)  background-color: $color; @if $enable-gradients  background-image: var(--#$variable-prefix>gradient); > > 
// Horizontal gradient, from left to right // // Creates two color stops, start and end, by specifying a color and position for each color stop. @mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%)  background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); > // Vertical gradient, from top to bottom // // Creates two color stops, start and end, by specifying a color and position for each color stop. @mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null)  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); > @mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg)  background-image: linear-gradient($deg, $start-color, $end-color); > @mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red)  background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); > @mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red)  background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); > @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800)  background-image: radial-gradient(circle, $inner-color, $outer-color); > @mixin gradient-striped($color: rgba($white, .15), $angle: 45deg)  background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); > 

Утилиты API

Фоновые утилиты объявлены в нашем API утилит в scss/_utilities.scss . Узнайте, как использовать утилиты API.

 "background-color": ( property: background-color, class: bg, local-vars: ( "bg-opacity": 1 ), values: map-merge( $utilities-bg-colors, ( "transparent": transparent ) ) ), "bg-opacity": ( css-var: true, class: bg-opacity, values: ( 10: .1, 25: .25, 50: .5, 75: .75, 100: 1 ) ), 

Как сделать прозрачный фон в css

Для управления прозрачностью фона в CSS есть два инструмента — opacity и rgba . Основное отличие этих инструментов в том, что rgba можно применить точечно, к конкретному элементу, opacity же влияет и на дочерние теги в том числе.

Исходный HTML документ:

 class="block1">
class="block2">
div width: 300px; height: 300px; /* Расположим оба блока друг над другом, чтобы показать эффект прозрачности */ position: absolute; top: 20px; left: 20px; > .block1  /* фон первого блока - картинка */ background-image: url('1.jpg'); > .block2  /* второй блок сделаем меньше для наглядности */ width: 200px; height: 200px; /* Вариант №1 */ /* background-color: red; */ /* opacity: 0.7; */ /* Вариант №2 */ background-color: rgba(255, 0, 0, 0.7); > 

opacity_example

Результат:

Как сделать полупрозрачный фон в css

В последнее время в сайтостроении активно применяются различные приемы, связанные с прозрачностью. Это позволяет создавать красивые шапки сайтов и множество различных декоративных элементов. Благодаря формату PNG-24 сегодня есть возможность вставлять на веб-страницу полупрозрачные изображения самых разных форм.

А что предусмотрено в самом css для использования полупрозрачных фонов? В последние годы в нем появилась возможность определять цвет текста или заднего плана в цветовом режиме rgba. Если вы работаете в графических редакторах, то наверняка знаете о нем. Цвет в rgba определяется так:

background : rgba ( доля красного , доля зеленого , доля синего , прозрачность )

Первые три значения записываются числовыми значениями от 0 до 255, где 255 – самая большая доля цвета. Прозрачность определяется по-другому – от 0 до 1. Если записать 0, то эффект будет такой же, как при background: transparent, то есть при полностью прозрачный фон.

Зачем все это нужно

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

Если же вам нужно, чтобы основной сплошной цвет просвечивался и через него было видно нашу картинку, то для этого и используется цветовой режим rgba. Например, я создам в html-документе два блока с произвольными идентификаторами.

position : absolute ;
width : 600px ;
height : 400px ;
background : rgb ( 255 , 234 , 13 )
width : 600px ;
height : 400px ;
position : absolute ;
background : url ( star . png )

Блоки идентичны друг другу во всем, кроме фона. Благодаря абсолютному позиционированию они стоят на одном и том же месте – в верхнем левом углу страницы, но поскольку блок #ct стоит в html-разметке последним, он полностью перекрывает своего товарища и на странице мы увидим просто желтый сплошной фон.

В то же время видим, что у #ab есть какая-то фоновая картинка, но мы ее не увидим, потом что у #ct не полупрозрачный фон и через него ничего не просвечивается. Все потому, что мы задали цвет в режиме rgb, а он не добавляет полупрозрачность, которая нам так нужна в данном случае. Давайте изменим стиль для #ct:

background : rgba ( 255 , 234 , 13 , 0.5 ) .

Обновляем страницу и видим вместо сплошного желтого более тусклый оттенок, а через него видно звездочки, которые и были фоновым изображением нашего блока #ab. Вот это и есть работа режима rgba.

Теперь давайте разбрем другой пример. Удалим один из блоков, а внутри оставшегося создадим дочерний элемент, которому тоже назначим свои стили.

width : 600px ;
height : 400px ;
background : url ( bg . png ) ;
padding — top : 100px ;
width : 400px ;
height : 300px ;
margin : 0 auto ;
background : pink ;
border — radius : 25px ;

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

Теперь достаточно определить подходящий оттенок, который был бы схож с розовым (pink), только записать его в режиме rgba, добавим последним значением прозрачность. Переопределяем цвет фона для дочернего элемента:

background : rgba ( 210 , 121 , 166 , 0.28 ) ;

Теперь, если обновить страницу, мы видим, что через цвет в дочернем блоке видно тот красивый орнамент, который задан для общего контейнера.

Где это может пригодиться в сайтостроении?

Хорошо, прием с полупрозрачностью мы с вами разобрали, а где он вообще применяется? Обычно его используют при создании так называемых масок у различных картинок, пунктов меню или товаров.

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

Другим примером использования может быть тот, что вы могли видеть выше. У основного контейнера была красивая фоновая картинка. Соответственно, чтобы этот орнамент был виден и через фоновый цвет дочерних элементов, его также нужно записать в rgba.

Ну а как сделать полностью прозрачный фон в css? Выше я писал, что для этого можно записать свойство background: transparent, либо же задать 0 в качестве четвертого значения при записи цвета в режиме rgba. Другой прием – записать блоку свойство opacity со значением 0, но тогда весь блок будет прозрачным, то есть невидимым.

Больше информации вы можете узнать из нашего курса по css3, где есть соответствующий урок по полупрозрачности и свойству opacity. Смотрите и изучайте его, чтобы еще лучше разобраться в этих свойствах. На этом я заканчиваю статьи и желаю вам успехов в изучении веб-технологий. Оставайтесь с webformyself, чтобы узнавать еще больше.

Прозрачные подписи с непрозрачным текстом

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

Проблемы, связанные с непрозрачностью слоев z-index

Проблемы, связанные с непрозрачностью слоев z-index

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

Начнем с основного блока div , чтобы задать для нашего изображения позиционирующий родительский элемент. Изображение помещено в блок div , для которого задано position:absolute с z-index равным 10 . Для div , который содержит подпись, задано position:absolute и bottom:0 . А также соответствующая высота и цвет фона: RGB ( 100, 0, 0 ). Для этого div также задано значение opacity: 0.6 , чтобы основное изображение просматривалось под ним. Тем не менее, текст использует ту же непрозрачность и выглядит ужасно:

Проблемы, связанные с непрозрачностью слоев z-index - 2

Ключом к решению данной проблемы является использование цветовой схемы rgba() из CSS3 . Она включает в себя параметр альфа-канала для настройки прозрачности/непрозрачности указанного цвета.

В rgba добавляется четвертый параметр, который задает transparent CSS элемента. Как и в случае со свойством CSS opacity , альфа-канал принимает значения от 0 ( полностью прозрачный ) до 1 ( полностью непрозрачный ). Как видно на втором изображении, через фон подписи просматривается основное изображение, но текст выводится непрозрачным. Благодаря чему он легко читается. CSS-код , который я использовал:

.rdCaptionBox < margin:0 auto; padding:0; position:relative; top:0; left:0; z-index:10; width:384px; height:256px; >.rdCaption < position:absolute; bottom:0; left:0; padding:4px; width:376px; height:26px; background-color:rgba(100, 0, 0, .6); z-index:11; >.rdCaptionText

Мы начинаем с блока div с классом » rdCaptionBox «, который задает настройки шрифта. Далее идет тег img , а затем другой блок div ( с классом » rdCaption » ). Для него задано position:absolute и z-index , чтобы расположить его поверх изображения. А также цвет фона с помощью rgba , чтобы задать прозрачность.

К сожалению, Internet Explorer начал поддерживать RGBA-цвета только с версии 9.0 , которая на данный момент используется только небольшой частью пользователей. Поэтому лучше добавить значение свойства opacity с помощью условного тега в комментариях !—[if lt ie 9] , чтобы задать непрозрачность для старых версий Internet Explorer , при этом не затрагивая отображение в других браузерах.

CSS и HTML-код , используемый для создания этого эффекта, очень прост. Мы установили контейнер div с заданным для свойства position значением relative . Для top и left то, что вам нужно ( обычно 0 ), и базовые значения z-index . Внутри этого блока div добавляется элемент, который будет отображаться на изображении. А также div с классом » rdCaption «, который будет содержать текст подписи. Для него задано position:relative , а также z-index со значением больше, чем у контейнера. Самой важной настройкой является установка background transparent CSS фона с помощью rgba() :

В этом примере более наглядно продемонстрирован полупрозрачный фон с непрозрачным текстом. Также заметен эффект тени для текста. Тень помогает добавить надписи определенную глубину и основательность. Internet Explorer создает тени для текста с помощью фильтров, но они не всегда дают приятный результат.

HTML5 и CSS3 открывают перед нами новые захватывающие возможности. Но веб-дизайнеры должны помнить, что многие пользователи застряли на старых версиях браузеров.

Согласно данным Statcounter , примерно 10% пользователей по-прежнему используют Internet Explorer версий 6 , 7 или 8 . Ни одна из них не поддерживает CSS 3 и background image transparent CSS . Эти пользователи должны учитываться при разработке сайтов для массового рынка.

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

Internet Explorer: Существует несколько групп разработчиков, работающих над программным обеспечением, которое добавляет поддержку многих функций CSS3 в старые версии Microsoft Internet Explorer . У меня остались наилучшие впечатления от работы с PIE — Progressive Internet Explorer . Если необходимо обеспечить поддержку старых версий Internet Explorer , я рекомендую PIE :

CSS3 позволяет использовать градиенты для фоновых изображений. На данном изображении я заменил равномерно полупрозрачный фон другим, который постепенно исчезает до полной прозрачности. Для этого эффекта сложно обеспечить обратную совместимость со старыми версиями Internet Explorer из-за уникальных графических фильтров компании Microsoft , которые необходимы для создания градиентов.

У вас могут возникнуть проблемы при получении непрозрачного текста. Этот эффект часто достигается за счет использования фонового PNG-изображения с настройками color transparent CSS градиента. Поскольку Internet Explorer поддерживает PNG , начиная с версии 7 , такой фоновый рисунок будет поддерживаться автоматически:

.rdCaptionGrad

Вадим Дворников автор-переводчик статьи « Transparent Captions with Opaque Text »

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *