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

Изменение прозрачности фона кажется простой задачей. В CSS есть свойство opacity, которое управляет прозрачностью. Но этот подход работает не всегда. Если нужно разместить, например, текст поверх картинки, то использовать opacity — не лучшее решение.

Давайте разбираться, в чем проблема с вроде бы подходящим свойством CSS и как изменить прозрачность фона картинки , чтобы не испортить внешний вид других частей интерфейса.

Наивный подход — использовать opacity

К вам приходит проджект-менеджер и показывает новый дизайн страницы облачные серверы . В нем есть такие облака. Задача — сделать их полупрозрачными, а сверху добавить текст.

Первая мысль — сделать прозрачный фон CSS с помощью opacity. Выглядит так, будто это оптимальное решение для поставленной задачи. Набросаем простую разметку и посмотрим, что из этого получится.

HTML:
 
Timeweb Cloud


CSS: 
.cloud background-image: url(../images/cloud.png'); 
opacity: 1;
>

Свойство opacity принимает значение от 0 до 1, где 0 — полная прозрачность, а 1 — полная непрозрачность. Можно регулировать отображение с очень высокой точностью. Правда, на глаз разница заметна только при значительном изменении.

Сейчас результат выглядит так:

Выставили непрозрачность, выглядит нормально. Но в дизайне явно указано, что картинка должна быть полупрозрачной. Попробуем изменить значение opacity — например, 0.5 вместо 1. Облака должны стать немного светлее, насыщенность цветов ведь тоже изменится.

Вылезла проблема — вместе с фоновой картинкой начал исчезать текст с названием сервиса cloud.timeweb.com . В дизайне страницы такого нет. Более того, если сделать opacity: 0, то текст вообще исчезнет, как и облака под ним. Значит, это решение не подходит. Осталось разобраться, в чём причина такого поведения.

Объяснение простое. Проблема в том, что непрозрачность автоматически наследуется дочерними элементами. Нет свойства CSS, которое можно использовать для изменения непрозрачности только фонового изображения родителя. Возможно, оно появится когда-нибудь в будущем. Пока же нужны небольшие «костыли».

Мы поняли, что такое применение opacity для решения задачи не подходит. Для изменения прозрачности фонового изображения потребуется другой подход.

Гибкий подход — использовать псевдоэлемент

Чтобы решить задачу, нужно поместить фоновое изображение в дочерний элемент родителя. Это гарантирует, что облака и текст будут каждый на своем слое. А непрозрачность каждого слоя можно контролировать по отдельности. В теории это выглядит как то, что нам нужно для достижения эффекта, который отрисовал дизайнер.

Разметка останется такой же, а стили перепишем:

.cloud position: relative; 
height: 100vh; 
width: 100%; 
display: flex; 
align-items: center; 
justify-content: center;
>

.cloud::before < 
content: ""; 
background-image: url('../images/cloud.png'); 
background-size: cover; 
position: absolute; 
top: 0px; 
right: 0px; 
bottom: 0px; 
left: 0px; 
opacity: 0.3;
>

.title position: relative; 
top: 80px; 
right: 50px;
>

Элемент .cloud получил свойство position: relative. Это нужно для того, чтобы относительно родителя позиционировать потомков — .cloud::before и .title. Потомки выстраиваются внутри родители с помощью флекса.

Чтобы сделать псевдоэлемент того же размера, что и родитель, необходимо задать ему абсолютное позиционирование. Верхнее, правое, нижнее и левое значения должны быть равны нулю, чтобы :before не схлопывался. У него также должно быть установлено свойство content, иначе он не будет отображаться на странице.

Тексту нужно установить position: relative, чтобы он был поверх наложения и картинки. Если вы не установите position явно, надпись будет скрыта под абсолютно позиционированным псевдоэлементом. Это позволяет добиваться разных интересных эффектов в интерфейсе. Но мы сейчас решаем другую задачу.

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

Вместо .cloud::before можно добавить обычный HTML-элемент для фонового изображения CSS — например, ещё один div. Принципиально это ничего не изменит. Но использование псевдоэлементов помогает упростить структуру HTML и не плодить в разметке лишние сущности.

А в чём же гибкость этого подхода?

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

Свойства background-image и background-size перенесём в стили .cloud. В стили .cloud::before добавим background-color: rgba(0,0,0,0.25). Должно получиться так:

.cloud position: relative; 
height: 100vh; 
width: 100%; 
display: flex; 
align-items: center; 
justify-content: center; 
background-image: url('../images/cloud.png'); 
background-size: cover;
>

.cloud::before < 
content: ""; 
position: absolute; 
top: 0px; 
right: 0px; 
bottom: 0px; 
left: 0px; 
background-color: rgba(256,256,256,0.75)
>

RGBA — это три основных цвета (Red, Green, Blue) плюс альфа-канал, который помогает управлять прозрачностью. Значение rgba(256,256,256,0.75) говорит о том, что мы наложили белую плашку с непрозрачностью 25%. Вместо белого можно применить любой другой цвет и получить интересный эффект наложения:

Какой способ выбрать — решайте сами. Если с цветами играть не придётся, то можно обойтись первым вариантом. Хотя кто знает, что в следующий раз придёт от дизайнера.

Заключение

Как мы увидели, свойство opacity всё-таки пригодилось. Правда, использовать его «в лоб» для изменения прозрачности не получится. Выход простой — добавить псевдоэлемент, который решит проблему с наследованием.

Источник

Как сделать задний фон картинки прозрачным html?

>
#pc display: none;
>
#mobile display: inline-block;
>
>
.header border: none;
border-bottom: 2px solid white;
position: fixed;
width: 100%;
height: 10%;
right: 0;
top: 0;
background: #34e89e; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #0f3443, #34e89e); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #0f3443, #34e89e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
>
.content position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 90%;
background: #C33764; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #1D2671, #C33764); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #1D2671, #C33764); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

>
media screen and (orientation : landscape) #pc display: inline-block;
>
#mobile display: none;
>
.header border: none;
border-bottom: 2px solid white;
>
.header__text position: fixed;
margin-left: 10px;
>
>
.header__text position: fixed;
top: 0;
width: 100%;
height: 100%;
>
media screen and (orientation: landscape) .simple margin-top: 0.5%;
margin-left: 6%;
>
.pop margin-top: 0.5%;
margin-left: 4%;
float: left;
>
>
media screen and (orientation: portrait) .simple position: absolute;
margin-top: 3%;
margin-left: 10%;
>
.pop margin-top: 3%;
margin-left: 4%;
float: left;
>
>
.simple,.pop border-radius: 5px;
border: 2px solid white;
>.about background: #C33764; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #1D2671, #C33764); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #1D2671, #C33764); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
>
body background: #C33764; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #1D2671, #C33764); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #1D2671, #C33764); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
>

Источник

How to Remove Background Image in CSS

As we know, the background image is manipulated with the CSS background-image property, which can specify one or more images for an element. However, there are cases, when we don’t want a background image and want to remove it. This is quite easy.

In our tutorial, we’ll show how the background image can be removed using a few steps.

Create HTML

h2>Example h2> div> div> div id="no-background"> div> div> div>

Add CSS

First, add style to the first and last elements.

• Set the height and width of the .
• Specify the margin-bottom, background-color, and border properties.
• Use the background-image property with the «url» value.
• Set the background-repeat to «no-repeat».
• Add background-size.

div < height: 170px; width: 300px; margin-bottom: 20px; background-color: #CDCDCD; border: 2px solid #CDCDCD; background-image: url('https://images.unsplash.com/photo-1507919909716-c8262e491cde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'); background-repeat: no-repeat; background-size: 100%; >

Now, we can style the with the «id» named «no-background» and remove the background image of only this element.

div#no-background < background-image: none; >

Let’s see the result of our code.

Example of removing the background image:

html> html> head> title>The title of the document title> style> div < height: 170px; width: 300px; margin-bottom: 20px; background-color: #CDCDCD; border: 2px solid #CDCDCD; background-image: url('https://images.unsplash.com/photo-1507919909716-c8262e491cde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'); background-repeat: no-repeat; background-size: 100%; > div#no-background < background-image: none; > style> head> body> h2>Example h2> div> div> div id="no-background"> div> div> div> body> html>

So, we demonstrated an example where we used three elements but removed the background image of only one .

Источник

Сделать белый фон изображения прозрачным в CSS

У меня есть два изображения, один из которых представляет собой маленькую иконку, которая накладывается поверх первого изображения. Мой значок имеет белый фон, поэтому, когда значок помещается поверх другого изображения, мы получаем этот эффект, когда над изображением появляется белый квадрат. В идеале, я не хочу отображать этот белый фон поверх другого изображения. Есть ли свойство CSS, которое я могу применить к своему значку, чтобы сделать его белый фон прозрачным?

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

5 ответов

Лучший способ — использовать программное обеспечение, такое как Photoshop или Paint.Net.

Я бы рекомендовал Paint.Net. Вы должны удалить белый фон в Paint.Net и сохранить img как .png.

Подобные ответы действительно раздражают меня, потому что они просто полностью обходят вопрос и отвечают на что-то совершенно другое. Скажем, например, вы связываете график цены акций из внешнего источника. Вы не можете точно копировать файл в paint.net каждую минуту и изменять его, не так ли?

На самом деле есть способ, хотя он поддерживается только в Chrome, Firefox и Safari. Если цвет фона белый, вы можете добавить свойство CSS:

@SteffiKeranRaniJ Оформите мой ответ ниже. Эта техника является ВОЛШЕБНОЙ и нуждается в большей наглядности.

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

Вы можете создать контейнер для своего изображения. Затем для css контейнера:

overflow:hidden; height: (depends on your image, then make it a smaller px); width:100%; 

mix-blend-mode работает для некоторых браузеров, но мы обнаружили, что это вызывает проблемы с производительностью в хроме, я понятия не имею, почему.

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

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

Как этот «волшебный» цвет найден; путем вычисления того, насколько темнее будет каждая цветовая ось для удаления непрозрачности. Формула для этого 255 — ( 255 — x ) / opacity . Проблема заключается в следующем: если непрозрачность установлена ​​слишком низко, формула дает отрицательные числа (которые нельзя использовать). Если непрозрачность слишком высока, вы получите некоторую окраску на небелых участках вашего изображения.
Первоначально мы использовали электронную таблицу, которая будет выполнять вычисления, и с помощью ручной проб и ошибок мы обнаружим, что цвет Goldilox.
Когда мы начали использовать sass, я понял, что это может быть выполнено с помощью двоичного поиска. Поэтому я создал функцию sass, которая выполняет эту работу для нас.

Отметьте этот смысл на sassmeister. Передайте свой цвет фона в функцию opacitator в строке 56 sass-кода. и используйте сгенерированный цвет rgba в div (или псевдоэлементе) для наложения изображения.

Источник