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

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

  • автор:

Прозрачное CSS изображение, размер и рамка картинки

CSS дает возможность регулировать прозрачность изображения:

Картинка в css

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

  • opacity:0.25 – определяет прозрачность изображения. Значения: от 0 до 1.
  • filter:alpha(opacity=25) – параметр для Internet Explorer. Значения: от 0 до 100.
  • hspace=»» – определяет дополнительные отступы от изображения по горизонтали.
  • alt=»» – определяет альтернативный текст. Нужно прописывать даже пустой атрибут.

Определяем CSS прозрачность изображения

Рассмотрим следующий код:


Открыть в новом окне

Проведите указателем мыши по картинкам внизу

картинка и ее размер картинка и ее фонCSS картинка и ее свойства размер картинки в пикселях

CSS размер изображения, фон и рамка картинки

рассмотрим следующий пример:


красивая картинка

Обозначайте реальный размер изображения, чтобы не искажать начальное качество.

Описание значений атрибутов

  • width – ширина картинки.
  • height – высота картинки.
  • background – фон картинки.
  • padding – поля картинки.
  • border – рамка картинки.
Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

CSS изображение CSS прозрачное изображения CSS плавание картинки

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

Прозрачность фона на CSS

Если грамотно реализовать на сайте прозрачность фона, страницы будут выглядеть очень эффектно. Важно использовать картинку, а не однотонный цвет. В последнем случае полупрозрачности как таковой не будет, только более блеклый тон.
Существует множество способов реализовать в CSS прозрачность фона. Это и использование PNG изображения, и создание клетчатой картинки, и применение свойства opacity.

Фон из PNG изображения

Сначала необходимо создать полупрозрачный фоновый рисунок в графическом редакторе, а потом сохранить его в формате PNG-24. После этого просто применяем свойство background-image.
Пример кода:

.classname < background-image: url(opacity.png); /* Полупрозрачный фон */ >

Этот метод плохо работает в InternetExplorer версии 6 и ниже. Чтобы реализовать прозрачность PNG, необходимо воспользоваться специальными скриптами. Этот способ имеет некоторые ограничения:

  1. Если в браузере отключить картинки, фоновое изображение пропадет.
  2. Если требуется изменить прозрачность фона, придется переделать картинку.
  3. Нельзя менять прозрачность методами JS. Также невозможно к такому фону применять анимацию, напрямую изменяющую прозрачность.

Клетчатое изображение

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

Свойство opacity

Свойство opacity появилось сравнительно недавно, поэтому старыми версиями браузеров он поддерживается лишь ограниченно, необходимо использовать вендорные префиксы.
Значение свойства колеблется в пределах от 0 до 1. Его характерная особенность – наследование всеми дочерними элементами. При этом уровень их непрозрачности не может быть больше, чем у родителя. Поэтому чисто технически невозможно реализовать ситуацию, когда дочерний элемент непрозрачный, если к родительскому применено свойство.
Синтаксис следующий (пояснения в комментариях).

.test < opacity: 0.7; /* Полупрозрачный фон */ filter: alpha(Opacity=70); /* Прозрачность в IE */ >

Свойство filter: alpha(Opacity=70) реализуется для поддержки старых версий InternetExplorer. Для полной совместимости необходимо указывать оба свойства. Плюс этого метода в том, что можно гибко управлять прозрачностью элемента средствами JS или CSS. Например, можно сделать элемент просвечивающимся при наведении с помощью псевдоселектора :hover.

.test:hover < opacity: 0.7; /* Полупрозрачный фон */ filter: alpha(Opacity=70); /* Прозрачность в IE */ >

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

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

  • Вы хотите научиться создавать страницы с оригинальным и ярким современным дизайном? Применение полупрозрачных элементов способно помочь Вам в решении этой непростой задачи. Сегодня мы рассмотрим основные практические способы задания прозрачности структурных элементов.

    Как задать прозрачность?

    • Свойство opacity.
    • Использование PNG -картинки
    • Формат системы RGBA
    • Ну, и наконец, древность или клетчатые изображения.

    CSS свойство Opacity

    Применение стилевого CSS свойства оpacity позволяет задать прозрачность того элемента, к которому применяется. Значения, которые можно использовать в качестве аргумента изменяются в пределах от 0 до 1.
    Рассмотрим пример.

    DOCTYPE html> html> head> title>TODO supply a titletitle> meta charset="UTF-8"> link rel="stylesheet" media="all" type="text/css" href="css/style2.css" /> head> body> div class=" prozrachen "> Тут будет много Вашего текста div> body> html>
    body  background: url(./vaden-pro-logo.png); /* Фон для тела страницы */ > . prozrachen  padding: 10px; /*Отступы для текста*/ background: darkturquoise; /* Задаем цвет фона */ margin: 0 auto; /* Центрируем блок */ width: 50%; /* Задаем ширину блока */ opacity: 0.7; /* Задаем прозрачность */ font: 48px/64px Times New Roman; text-align: justify; >

    В результате мы получили полупрозрачный блок:

    метод opacity

    1. Opacity принимает значения из диапазона: 0 (полная прозрачность) — 1 (непрозрачность).
    2. Кросс-браузерность. В IE до седьмой версии включительно Opacity не поддерживается. Добиться одинакового отображения элемента поможет следующая строчка:

    filter: alpha(Opacity=70); 
    • с абсолютным позиционированием (position: absolute)
    • с фиксированным линейным размером (height или width).

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

    color: white;

    и рассмотрим его под микроскопом:

    прозрачность блока

    Как видим, контент нашего блока (текст) тоже стал полупрозрачным. Но что делать, если на практике прозрачность содержимого вас не интересует, а интересует лишь прозрачность фона? В таком случае, переходим к следующему пункту.

    Использование PNG -картинки

    Интересной особенностью формата PNG является то, что он имеет 256 уровней прозрачности. Думаю, Вы уловили ход мыслей, и наверняка уже построили алгоритм работы такого подхода. Мне остается только его озвучить.

    Метод png картинки

    1. Создаем в Photoshop, однотонную полупрозрачную картинку (назовем ее transparent) и сохраняем в формате png.
    2. Используем ее в качестве бэкграунда:

    body  background: url(./vaden-pro-logo.png); > .prozrachen  padding: 10px; background: url(./transparent.png); margin: 0 auto; width: 50%; font: 48px/64px Times New Roman; color: white;li> text-align: justify; >

    В результате мы получили блок с прозрачным фоном и непрозрачным содержимым:

    Метод PNG

    1. В отличии от свойства opacity прозрачность задается только для фона
    2. Кросс-браузерность. Работает почти во всех браузерах, и это плюс. Но прозрачность PNG не поддерживается в IE6. Если вы оптимизируете свой сайт под такую древность — придется применять другие методы или скрипты.
    3. При отключении отображения картинок, ваш фон пропадет (учтите этот момент при оптимизации отображения на мобильных устройствах, ведь безлимитный интернет не всегда есть под рукою).
    4. Для изменения цвета и/или степени прозрачности вам нужно создать новую картинку и перезалить ее на серв.

    Формат системы RGBA

    Одним из самых современных методов изменения транспарантности фона является применение системы RGBA.

    RGBA – система представления цвета при помощи трех стандартных каналов RGB (красный, зеленый, синий), и четвертого, так называемого Alpha-канала, характеризующего степень прозрачности.

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

    В уже известном нам примере, заменим содержимое в CSS файле на следующее:

    body  background: url(./vaden-pro-logo.png); /* Фоновый рисунок */ > .prozrachen  padding: 10px; background: rgba(0, 206, 209, 0.7); margin: 0 auto; width: 50%; font: 48px/64px Times New Roman; color: white; text-align: justify; >

    метод rgba

    1. В отличии от свойства opacity прозрачность задается только фону
    2. В отличии от метода PNG картинки, для изменения цвета или степени транспарентности нам нужно просто поменять значения rgba.
    3. Кросс-браузерность. Работает во всех современных браузерах (начиная с IE9, Op10, Fx3,Sf3.2).Для более старых браузеров придется либо пожертвовать прозрачностью, либо применять opacity, png методы.

    Клетчатые изображения, или с уважением к истории

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

    Метод клетчатой картинки

    В результате применения такой картинки в качестве background получали псевдо-прозрачный фон.

    Клетчатый фон

    1. При просмотре текста на таком фоне могут быстро уставать глаза (особенно давит рябь при прокрутке).
    2. В остальном особенности применения аналогичны с методом «PNG -картинки».

    Подытожим?

    Напоследок, несколько общих рекомендаций по использованию прозрачности в своих проектах:

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

    Прозрачность фонового изображения в CSS

    opacity – это свойство CSS, которое позволяет настраивать прозрачность элемента. По умолчанию для всех элементов оно имеет значение 1. Приближая это значение к 0, вы можете сделать элемент более прозрачным.

    Обычный вариант применения свойства opacity – использование изображения как части фона. Регулировка прозрачности может улучшить читаемость текста или поможет добиться желаемого визуального эффекта. Однако имейте в виду: невозможно менять opacity элемента background-image, не затрагивая при этом его дочерние элементы.

    В этом руководстве мы предлагаем два метода обхода этого ограничения для фоновых изображений.

    Требования

    Чтобы следовать этой статье, вам понадобятся навыки работы с такими вещами:

    • opacity.
    • position: relative иposition: absolute.
    • контекст наложения и z-index.
    • псевдоэлементы :before и :after.

    Метод 1: Изображения и абсолютное позиционирование

    Первый подход будет основан на двух элементах (как можно понять из названия). Один из них – «обертка», которая обеспечивает точку отсчета с помощью position: relative. Второй – это элемент img, который появляется за контентом с помощью position: absolute и контекста наложения.

    Разметка, написанная с применением этого подхода, может выглядеть так:

     

    Hello World!

    Соответствующие CSS-стили будут выглядеть так:

    .demo-wrap < overflow: hidden; position: relative; > .demo-bg < opacity: 0.6; position: absolute; left: 0; top: 0; width: 100%; height: auto; > .demo-content < position: relative; >

    В итоге текст «Hello World!» будет наложен поверх изображения.

    Родительский demo-wrap устанавливает блок, содержащий абсолютное позиционирование. Для demo-bg установлено значение position: absolute и присвоено свойство opacity . Для demo-content установлено значение position: relative. Из-за организации разметки он имеет более высокий контекст наложения, чем demo-bg. Также для более точного управления контекстом наложения можно использовать z-index.

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

    Метод 2: Псевдоэлементы CSS

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

    Вот пример разметки для этого подхода:

     

    Hello World!

    А вот – ее сопутствующие стили:

    .demo-wrap < position: relative; >.demo-wrap:before < content: ' '; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.6; background-image: url('https://your-image'); background-repeat: no-repeat; background-position: 50% 0; background-size: cover; >.demo-content

    Эта разметка и стили выведут фразу «Hello World!» поверх изображения.

    Родительский demo-wrap устанавливает блок, содержащий абсолютное позиционирование. Псевдоэлементу :before присвоено position: absolute с небольшой прозрачностью. Он использует background-size: cover, чтобы занять все доступное пространство.

    Преимущество этого подхода заключается в поддержке других свойств фона, таких как background-position, background-repeat и background-size. Его недостатком является использование одного из псевдоэлементов, который может конфликтовать с другими эффектами дизайна – например, с clearfix.

    Заключение

    В этой статье мы рассмотрели два метода обхода ограничения для непрозрачных фоновых изображений.

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

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