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

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

  • автор:

Прозрачность с помощью CSS

Справочник свойств CSS

Иногда возникает необходимость сделать прозрачный фон для определённого блока на странице. Добиться данного эффекта можно созданием прозрачного фонового рисунка в формате *.png и установив его через свойство background: url(“./images/fon.png”);.

Используем свойство OPACITY

Зачем такие сложности, если это можно сделать с помощью CSS. Давайте создадим на странице основной блок(page) и вложенный блок(block), которому зададим прозрачность. Кроссбраузерность достигается следующим образом: свойство для Internet Explorer – filter:alpha(opacity=50) (значение прозрачности в диапазоне от 0 до 100), для браузеров с поддержкой CSS3 стандарта – opacity:0.5 (число в диапазоне от 0.0 до 1.0).

HTML код:

  Полупрозрачный элемент div.page < margin:0 auto; width:450px; height:300px; background:url(../images/3a0fdf3dc1.jpg) no-repeat; border:2px solid #555555 >div.block < width:260px; height:140px; margin-top:79px; margin-left:94px; background-color:#ffffff; border:1px solid #333333; /* Internet Explorer */ filter:alpha(opacity=50); /* CSS3 стандарт */ opacity:0.5 >div.block p  

Прозрачный фон для блока.

Результат:

Прозрачный фон для блока

Как Вы заметили, прозрачность распространяется на все дочерние элементы

Прозрачный фон для блока

в DIV с классом block и они не могут превысить значение прозрачности своего родителя. Т.е., всё что находится в данном блоке становится прозрачным. Что делать, если надо оставить прозрачный фон только у дива?

Используем свойство BACKGROUND-COLOR

Нам необходимо внести некоторые изменения в таблицу стилей CSS, а именно заменить для блока DIV с классом block свойство opacity на свойство background-color.

div.block < width:260px; height:140px; margin-top:79px; margin-left:94px; border:1px solid #333333; /* прозрачный фон только DIV.block */ background-color: rgba(255, 255, 255, 0.5); /* Цвет фона, прозрачность 0.5*/ >

Результат:

Прозрачный фон для блока

В выше приведённом примере используется для цвета и фона формат RGBA. Где, первые три буквы расшифровываются как red, green, blue (красный, зеленый, синий), последняя символизирует собой альфа-канал (a) и задает прозрачность элемента от 0.0 до 1.0.

background-color: rgba(r, g, b, a);

В скобках вместо букв ставится значение компонента цвета, его можно посмотреть в любом графическом редакторе, например Paint.Net (скриншот). Последнее же значение a устанавливает прозрачность и совпадает со значением свойства opacity.

  • ← Как реализовать закругление углов не используя при этом изображения?
  • META – теги: описание и правила создания →

Прозрачный текст на CSS

Прозрачный текст на CSS

Свойство mix-blend-mode определяет режим смешивания цветов выбранного элемента с нижними слоями.

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

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

На прозрачность элемента можно повлиять 2 способами: rgba() и opacity . Они между собой не взаимосвязаны, и по-разному влияют на элемент.

opacity — это свойство, которое определяет уровень прозрачности определенного элемента в целом. Значение непрозрачности варьируется от 0 до 1.

/* на весь элемент 30% opacity */ .сontent-opacity  background-color: rgb(0,0,0); opacity: 0.3; border: 10px solid blue; > 

rgba() — влияет на одно отдельное свойство выбранного элемента, например, background-color или border-color :

/* 30% прозрачность только для фонового цвета */ .сontent-opacity  background-color: rgb(0,0,0, 0.3); border: 10px solid blue; > 

Прозрачный CSS фон, цвет фона страницы

CSS цвет фона страницы будет зеленым:


Пример с цветом фона


Текст белого цвета на зеленом фоне

prozrachnyj fon css

Посмотреть результат в новом окне: CSS фон и его цвет

Атрибуты и значения

  • background-color – определяет цвет фона.
  • color – определяет цвет текста.
  • Селектор body – определяет видимую часть документа.

Следующая запись также будет правильной:


Пример с фоновым цветом


Текст белого цвета на зеленом фоне

В верхнем примере цвет фона был задан при помощи CSS атрибута background .

CSS картинка — фон или фоновое изображение

CSS картинка — фон определяется с помощью изображения

Например, у нас есть вот такая картинка:

kartinka fon

Напишим следующий код для отдельной страницы:


Картинка — фон в CSS

Какой-то произвольный текст.


Посмотреть результат в новом окне: CSS фон — картинка

В следующем уроке фон — картинка рассмотрен более подробно.

CSS прозрачный фон для блока

CSS атрибуты, определяющие прозрачность фона:


Полупрозрачный элемент


Прозрачный фон для блока.

css prozrachnyj fon, primer

CSS прозрачность фона была задана для Internet Explorer и для других браузеров.

Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

CSS курсоры Прозрачный CSS фон и картинка CSS картинка и фон

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | Прозрачный CSS фон? – Не вопрос!

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

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