Изменение прозрачности фонового изображения css

Способ 3. Пропиаренный

Значение параметра варьируется в диапазоне , где при 0 объект невидим, а при 1 – отображается полноценно. Однако и здесь есть некие неприятные моменты.

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

Во-вторых, Internet Explorer опять «воротит носом» и вплоть до 8 версии не функционирует с opacity
.

Для решения этой проблемы используется filter:
alpha (Opacity=значение)
.

Рассмотрим пример.

Пример 2
В нашем магазине вы найдете все виды цветов.

Область заполнения фона

Фон может зополнять разные области блока. Область задаётся с помощью свойства
background-clip. Оно принимает следующие значения:

background-clip: border-box — весь блок вместе с рамкой (по умолчанию)

background-clip: padding-box — весь блок без рамки

background-clip: content-box — фон заполняет только область содержимого

При значении border-box заполняются только прозрачные части рамки. Если
рамка сплошная и непрозрачная, то за ней фон не отображается.

Добавим на страницу блок, зададим ему рамку и внутренние отступы и установим фон, заполняющий только
содержимое блока:

Стиль:

#div2
  {
  background-clip: content-box;
  background-color: Green;
  border: 1px solid Red
  padding: 10px;
  }

HTML код:

<div id="div2">Фон заполняет только контент</div>

Фоновая прозрачность изображения с CSS3?

Постараюсь приводить различные сочетания горячих клавиш.

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

Открываем нужное изображение в редакторе. Теперь сделаем прозрачный фон для слоя. В окне «Слои» кликаем два раза мышкой по добавленному слою – напротив него будет стоять замочек. Откроется окно «Новый слой», нажмите в нем «ОК». После этого замочек исчезнет.

Выбираем инструмент «Волшебная палочка». В строке свойств укажите уровень чувствительности, позадавайте разные значения, чтобы понять, как он работает, например 20 и 100. Чтобы снять выделение с рисунка нажмите «Ctrl+D».

Задаем чувствительность и нажимаем волшебной палочкой на область фона. Чтобы добавить к выделенному фону, те части, которые не выделились, зажмите «Shift» и продолжайте выделение. Для удаления выделенных областей нажмите «Delete».

Теперь вместо фона шахматная доска – это значит, что у нас получилось сделать белый фон прозрачным. Снимаем выделение – «Ctrl+D».

Чтобы правильно сохранить изображение на прозрачном фоне, выберите формат PNG или GIF, в любом другом формате, оно сохраниться на белом фоне.

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

В этом случае, воспользуемся инструментом «Быстрое выделение». Кликаем по волшебной палочке левой кнопкой мыши с небольшой задержкой и выбираем из меню нужный инструмент.

Теперь нужно выделить объект, который мы хотим оставить на прозрачном фоне. В строке свойств устанавливайте различные размеры и кликайте на объект, добавляя к нему области. Если ошибочно выделится ненужный фон, нажмите «Alt» и уберите его.

Для просмотра результата нажмите «Q». Розовым будут выделены те части изображения, которые станут прозрачными.

Копируем выделенные области, нажав «Ctrl+C». Дальше создаем новый файл, «Ctrl+N», с прозрачным фоном.

Вставляем в него скопированные фрагменты, «Ctrl+V». Если на них остались ненужные части фона, уберите их, используя инструмент «Ластик». Сохраняем сделанные на прозрачном фоне картинки в формате PNG или GIF.

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

Поделитесь статьёй с друзьями:

Прозрачность картинки

Для создания эффекта прозрачности в CSS используется свойство opacity.

Браузер IE8 и более ранние его версии поддерживают альтернативное свойство – filter:alpha(opacity=x), где “x” может принимать значение от 0 до 100, чем меньше значение, тем прозрачнее будет элемент.

Все остальные браузеры поддерживают стандартное CSS свойство opacity, которое может принимать в качестве значения числа от 0.0 до 1.0, чем меньше значение, тем прозрачнее будет элемент:

<!DOCTYPE html><html> <head> <meta charset=”utf-8″> <title>Название документа</title> <style> .myClass { float: left; margin-right: 5px; opacity: 0.4; filter: alpha(opacity=40); /*для IE8 и более ранних версий*/ } </style> </head> <body> <img src=”klematis.jpg” class=”myClass”> <img src=”klematis.jpg”> </body></html> Попробовать »

Эффект прозрачности фона (HTML и CSS)

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

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

Рассмотрим полупрозрачность текста и фона — как правильно ее использовать в дизайне сайта:

opacity

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

HTML 5 CSS 3 IE 9

RGBA

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

Обычно в дизайне полупрозрачным должен быть только фон элемента, а текст непрозрачным для сохранения его читабельности. Свойство opacity здесь не подходит, потому что текст внутри элемента также будет частично прозрачным. Лучше всего использовать формат RGBA, частью которого является альфа-канал или иными словами значение прозрачности. В качестве значения пишется rgba, затем в скобках через запятую перечисляются значения красной, синей и зелёной компоненты цвета. Последним идёт прозрачность, которая задаётся от 0 до 1, при этом 0 означает полную прозрачность, а 1 непрозрачность цвета — синтаксис применения rgba.

Полупрозрачный фон

HTML 5 CSS 3 IE 9

Значение непрозрачности для фона установлено 90% — полупрозрачный фон и непрозрачный текст.

• < Назад
• Вперёд >

Атрибут background-color

В CSS цвет фона можно задать несколькими способами: с помощью шестнадцатеричного кода, названия цвета или RGB-записи. В CSS3 стало возможно использовать вместо RGB-записи вариант с RGBA.

Шестнадцатеричный код цвета записывается в свойстве после решетки: background-color: #FFDAB9. Если же символы в такой записи попарно совпадают, код обычно немного сокращают: #ccff00 можно записать как #cf0:

body {background-color: #cf0;}.

Название есть даже у самых экзотичных цветов. Например, помимо стандартных red и white вы можете использовать NavajoWhite (#FFDEAD) или Honeydew2 (#E0EEE0):

body {background-color: purple;}.

Последний вариант RGB или RGBA записи позволяет задавать не только цвет, но и прозрачность фона CSS, однако способ работает в IE только старше 9 версии. Остальные браузеры нормально распознают вариант с прозрачностью. По стандартам W3C предпочтительно использовать все-таки RGBA вместо более привычного RGB.

Последнее значение у RGBA и задает непрозрачность фона от 0 (прозрачный) до 1 (непрозрачный).

Есть еще некоторые необычные значения. Цвет фона можно задать с помощью HSL и HSLA. Оба были добавлены в CSS3, а потому не поддерживаются IE ниже 9 версии. Варианты идентичны RGB или RGBA, только в другом формате: Hue (оттенок — значение на цветовом круге, задается в градусах), Saturate (насыщенность — интенсивность цвета в процентах, от 0 до 100), Lightness (светлота — яркость, измеряется аналогично параметру Saturate).

Cases and Examples

2.1 Different Opacity with Hover

Opacity may very well be a great hover effect for elements of HTML. Look at the button example below:

BUTTON HOVER

.button {
	border-radius: 0.4em;
	background-color: #d17474;
	width: 10em;
	font-weight: bold;
	text-align: center;
	padding: 1em;
	color: white;
}
.button:hover {
	opacity: 0.7; 
}

Opacity now will be 30% less than the initial opacity on hover.

Button Opacity on Hover

2.2 Image Opacity Example

We can apply a nice opacity on images containing a transparent box inside. Look at the code below:

<!-- HTML SECTION  -->

<div class="image"><div class="image-text">BIRDS LIFE</div></div>

.image {
	background-image: url(image.jpg);
	background-repeat: no-repeat;
	width: 600px;
	height: 400px;
}

.image-text {
	width: 200px;
	text-align: center;
	font-size: 25px;
	font-weight: bold;
	color: white;
	padding: 1em;
	background: rgba(255,255,255,.5);  /* set background color and opacity of text box */
}

The image with a title styled with an opacity in the backround would look like this:

Opacity Title of an Image

Notice how we used the way to set color and opacity of the text box. Generally speaking, it is just the same as applying background color and opacity properties separately and giving same values, this is just to show you there is another way of how you can set these values in one single line. With RGBA, you set individual values for Red, Green and Blue colors.

Прозрачность различных элементов

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

CSS прозрачность картинки.

Рассмотрим несколько вариантов создания полупрозрачной картинки. В следующем примере первой картинки не задана прозрачность, вторая имеет прозрачность 50%, третья 30%.

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

Результат:

Прозрачность на CSS при наведении курсора на картинку.

Часто необходимо сделать прозрачным картинку или любой другой элемент в тот момент когда на его наведен курсор. Сделать это можно при помощи CSS псевдокласса:hover. Для этого нашей картинке нужно прописать два класса один обычный — это будет неактивное состояние картинки и второй класс с псевдоклассом:hover, здесь необходимо указать прозрачность картинки в момент наведения курсора.

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

Результат можете посмотреть в демо.

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

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

В качестве примера приведем вариант с фоном страницы созданным при помощи картинки и блоком с фоном созданным при помощи цвета и обладающим прозрачностью 50%.

Пример кода:

Прозрачность
Текст

Вот результа размещенного выше кода:

Как задать в css прозрачный цвет? На текущий момент для этого есть 3 способа.

Способ 1 — значение transparent

Если вы зададите в качестве значения цвету текста или фона значение transparent , то цвет будет полностью прозрачным, то есть невидимым. Пример:

Color: transparent;

Такой текст нельзя будет увидеть на странице.

Способ 2 — цветовой режим rgba

А это уже нововведение css3. Ранее в веб-разработке такого режима не было, был только rgb. Наверняка вы знаете, как записывать цвет в этом формате. Для этого вам нужно в скобках указать три значения от 0 до 255, указывающие на насыщенность одного из трех основных цветов (красный, зеленый, синий). Например:

Background: rgb(230, 121, 156);

Формат rgba ничем не отличается, только добавляется четвертое значение — степень прозрачности элемента от 0 до 1. Вообще этот формат записи в основном используют, чтобы задать полупрозрачный цвет, а не полностью прозрачный. Чтобы достичь полной прозрачности, нужно всего лишь в качестве четвертого значения написать 0.

Background: rgba(0, 0, 0, 0);

В таком случае остальные 3 цифры особой роли не играют.

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

Способ 3 — opacity

Еще одно свойство из технологии css3. Но я хочу вас сразу предупредить, что оно работает немного по-другому. С помощью opacity прозрачность задается всему блоку, к которому оно применяется. Таким образом, ухудшается читабельность текста и восприятие картинок. Так что свойство я вижу смысл применять только для блоков, в которых нет текста и какой-то иной информации. Значения можно задавать от 0 до 1, как и в случае с четвертым параметром при задании цвета в формате rgba .

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

Свойство opacity

Свойство CSS 3 opacity задает значение прозрачности и варьируется от 0 до 1, где ноль это полная прозрачность элемента, а единица, наоборот, непрозрачность. У свойства opacity есть особенность — прозрачность распространяется на все дочерние элементы, и они не могут превысить значение прозрачности своего родителя. Получается, что непрозрачный текст на полупрозрачном фоне быть не может (пример 2).

Пример 2. Использование opacity

XHTML 1.0CSS 2.1CSS 3IECrOpSaFx

Результат примера показан на рис. 5.

Рис. 5. Полупрозрачность текста и фона

В Internet Explorer до версии 8.0 включительно opacity не работает, поэтому для него используется специфичное для этого браузера свойство filter. Естественно, оно приводит к невалидному коду CSS.

Шестнадцатеричные обозначения

Шестнадцать цветов — это мало, если учесть, что большинство мониторов могут отображать шестнадцать миллионов цветов. Но представьте, если бы нужно было задать название каждому из шестнадцати миллионов оттенков …

К счастью, в CSS предусмотрено несколько способов выбора цвета. Первый способ — шестнадцатеричное значение. Вот как выглядит название цвета в шестнадцатеричном формате: #FF5A28. Это комбинация букв и цифр, которые указывают цвет.

Всегда нужно начинать с указания символа хэша (#), за которым следует шесть букв или цифр от до 9 и от A до F.

Эти буквы или цифры работают парами. Первые две цифры указывают количество красного, две следующие — зеленого, а две последние — голубого. Смешивая эти значения (которые являются компонентами Red-Green-Blue в цвете), можно получить любой цвет.

Таким образом, #000000 соответствует черному цвету, а #FFFFFF — белому.

Некоторые графические программы, такие как Photoshop, Gimp и Paint.NET, позволяют указывать цвета в шестнадцатеричном формате.

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

p
{
color: #FFFFFF;
}

При этом допускается сокращенная запись: можно указать цвет с помощью только трех символов. Например: #FA3 эквивалентно #FFAA33.

Использование css-свойства opacity

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

Синтаксис свойства css:

opacity: значение;

где значение указывается в диапазоне от 0.0 (элемент полностью прозрачен) до 1.0 (элемент абсолютно не прозрачен).

Итак, для примера сделаем блок с классом fon, и для него зададим, для наглядности, фоновое изображение. В этом блоке разместим два блока с текстом opas1 и opas2, для которых зададим черный фон. После чего для второго блока зададим значение opacity равное 0.3.

Вот что получится:

Блок без прозрачности

Демонстрация работы свойства css opacity

HTML-код примера:

XHTML

<div class=»fon»>
<div class=»opas1″>
Блок без прозрачности
</div>
<div class=»opas2″>
Демонстрация работы свойства css opacity
</div>
<div>

CSS-код:

CSS

.fon{
background:url(images/opacity1.jpg);
width:400px;
padding:30px;
margin:auto;
}
.opas1{
width: 300px;
padding:30px;
background:#000;
margin:auto;
text-align:center;
margin:10px;
font-size:18px;
color:#fff;
}
.opas2{
width: 300px;
padding:30px;
background:#000;
margin:auto;
text-align:center;
opacity:0.3; /* уровень прозрачности в css*/
margin:10px;
font-size:18px;
color:#fff;
}

Как видите, свойство css сработало, блок с классом opas2 стал прозрачным и через него проглядывается фоновое изображение.

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

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

А что же делать, если нам нужно задать в css прозрачность фона для блока, но при этом сохранить читабельность содержащегося в нем текста?

More Examples

Example

The opacity property adds transparency to the background of an element, and
to all of its child elements as well. This makes the text inside a transparent element hard to read:

div.first {  opacity: 0.1;}div.second { 
opacity: 0.3;}div.third {  opacity: 0.6;
}

Example

To not apply opacity to child elements (like in the example above) use RGBA color values
instead.
The following example sets the opacity for the background color, but not for the text:

div.first {  background: rgba(76, 175, 80, 0.1);}div.second {  background: rgba(76, 175, 80, 0.3);
}div.third {  background: rgba(76, 175, 80,
0.6);}

Try it Yourself »

Tip: Learn more about RGBA Colors in CSS RGBA Colors.

Example

How to use JavaScript to change the opacity for an element:

function myFunction(x) {// Return the text of the selected option  var opacity = x.options.text;  var el = document.getElementById(«p1»);
  if (el.style.opacity !== undefined) {    el.style.opacity = opacity;  } else {
    alert(«Your browser doesn’t support this example!»);  }
}

Зачем это нужно?

Прозрачность картинки в «Фотошопе» может потребоваться для самых различных задач. К примеру, нужно наложить одно изображение на другое с заменой фона. Здесь без прозрачности никуда. Или нужно сделать водяной знак. Он тоже должен быть полупрозрачным. Да и вообще, прозрачность — чуть ли не самая важная составляющая любой работы в «Фотошопе». Применения прозрачности много. Именно поэтому стоит научиться пользоваться этим интересным инструментом для творчества.

Наложить прозрачность в «Фотошопе» можно несколькими способами. Некоторые из них до неприличия просты, а над некоторыми придется потрудиться. Но результат превзойдет все ожидания. Каждому ведь хочется почувствовать себя богом «Фотошопа». А без изучения «матчасти» это невозможно. Так что изучайте основы, господа. И в качестве первого урока научимся работать с прозрачностью.

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Метод 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, поднимающий их над изображением

Ниже приведена демонстрация: