Css transparent

Как задать в 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. Зачем это нужно, это уже другой вопрос. Через прозрачный фон может быть видно то, что находится под ним. Иногда так нужно сделать по дизайну. В целом, прием с полупрозрачностью сегодня очень распространен.

Прозрачный фон (background)

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

Задаем прозрачность у css background

Итак, все это делается очень просто благодаря такому формату записи цвета, как rgba. Если вы работаете с графическими редакторами, то наверняка знаете, что цветовой режим rgb расшифровывается так: доля красного цвета (red), доля зеленого (green) и синего (blue). Так вот, rgba практически тоже самое, только добавляется еще один параметр – прозрачность. Записывается так:

Background-color: rgba(173, 57, 22, 0.5)

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

Теперь вы знаете, как в css у свойства background задать прозрачность. Для этого нужно использовать цветовой режим rgba. Есть еще свойство opacity, но оно применяется ко всему элементу в целом. То есть при применении opacity прозрачность может примениться и к тексту, что сделает его нечитаемым.

Прозрачный фон на примере

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

А теперь зададим этот же черный цвет блоку, но укажем его с помощью цветового формата rgba, указав последнее значение в 0.7, например. Получится так:css background прозрачность для блока
Теперь фон блока просвечивается и через него видно фоновую картинку. Данная картинка и фон приведены лишь для примера. Как вы понимаете, в css background прозрачность может пригодиться, когда вам надо, чтобы фон вложенного элемента просвечивался, не закрывая другие фоны, расположенные в других слоях.

Сам цвет задавать с помощью rgba не сложно. Как уже и говорилось — первые три буквы означают три основных цвета: красный, зеленый и синий, а точнее их долю (от 0 до 255). Прописывая разные значения можно получать миллионы разных цветов, а полупрозрачность позволит вам придумать еще массу красивых эффектов для сайта, если это нужно будет.

dolinacoda.ru

The problem

If we want an element to have a semi-transparent background, and let whatever is behind it shine through, we have two options:

  • Using CSS and opacity
  • Creating a 24-bit PNG background image

The problem with using opacity in CSS, besides the annoying syntax to cater to all web browsers, is that not only the background of the element will have transparency, but all of its child elements as well. This means that any text within will have the same opacity, which I would dare to venture is very seldom the result one wants. You can cater to this problem with creating redundant elements, some tricky CSS positioning and such, but really, it’s a mess.

The problem with PNG images is, beside a superfluous HTTP request, that images are way, way more larger in file size than one or two lines of CSS code – especially considering that the image has to be a bit larger to avoid serious memory leak issues with 24-bit PNG images with alpha transparency in Internet Explorer.

The solution!

Therefore, I can happily offer an alternative for you: RGBa colors. The beauty in this is that you declare the normal RGB values + values for the level of transparency you want, resulting in a very easy way to declare transparency for a color. Making this happen with CSS, with a fallback for those web browsers that doesn’t support it, would look like this:


  	.alpha60 {  		/* Fallback for web browsers that doesn't support RGBa */  		background: rgb(0, 0, 0);  		/* RGBa with 0.6 opacity */  		background: rgba(0, 0, 0, 0.6);  	}  

The transparency will only be applied to the background – fantastic, isn’t it?! 🙂

A little caveat

Shockingly enough (erm), no version of Internet Explorer supports RGBa colors (i.e. not IE 6, IE 7 or IE 8 at the time of this writing). However, and lucky for us, in year 2000 Microsoft went crazy with implementing various filters in IE. One of them are the gradient filter, and what we can do is use that and just define the same start and end color. “Ok, but how do I get the transparency”, you might be thinking now. The answer to that is that you will declare that as part of the color hex value. A CSS gradient filter achieving the same effect as the CSS code above would look like this:

  	.alpha60 {  		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);  	}  

As you can see, it is actually declared as part of an 8-digit hex value, where the first two numbers is the alpha hex value, the next two is Red, and so on. The difference between how we do it with RGBa is that the hex value will range from 0 to 255, just as any color value. So, how do we convert an alpha level of 0.6 to its hex value?

This where a little Math comes in the picture. Basically, we take our desired alpha level, 0.6
, and multiplies it with 255 – then we convert that result into hex. One very easy way to do this is make use of Google’s Search Features, and just search google for 0.6 * 255 in hex. Unfortunately, though, Google’s calculator seems to only handle integers, hence 0.3 * 255 in hex won’t give you a result.

An alternative, or quicker way altogether, is to use the beauty of JavaScript. Just open up Firebug and type this into the console:

  	// Replace 0.6 with your desired alpha level  	Math.floor(0.6 * 255).toString(16);  

99 is then corresponding to 0.6, and becomes the first two digits of the start and end colors for the gradient filter.

Combining it all

With all techniques learned above, let’s put it together in a working CSS rule:

  	.alpha60 {  		/* Fallback for web browsers that doesn't support RGBa */  		background: rgb(0, 0, 0);  		/* RGBa with 0.6 opacity */  		background: rgba(0, 0, 0, 0.6);  		/* For IE 5.5 - 7*/  		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);  		/* For IE 8*/  		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";  	}  

NOTE! In addition to this, you have to declare background: transparent for IE web browsers, preferably served via conditional comments or similar!

Web browser support

RGBa support is available in:

  • Firefox 3+
  • Safari 2+
  • Opera 10

Filters in Internet Explorer are available since Internet Explorer 5.5.

This means that this will work for virtually everyone!

robertnyman.com

Возможные значения

Синтаксис свойства opacity в css выглядит так:

selector {   opacity: 1;  }    selector {   opacity: 0;  }    selector {   opacity: 0.4;  }

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

Элемент с нулевой прозрачностью становится невидимым, но все равно продолжает занимать свое место на странице и сохраняет возможность взаимодействовать с пользователем.

Если значение свойства отличается от нуля, то реальная прозрачность будет вычисляться как процент от некоторого верхнего предела. В обычной ситуации opacity: 1 определяет полную непрозрачность элемента.

Прозрачность дочерних узлов

Однако если элемент имеет родителя, прозрачность которого отличается от единицы, вычисление изменяется. Потомок не может быть «менее прозрачным», чем любой из его предков. Значение CSS-свойства opacity родительского блока становится верхним пределом прозрачности дочернего узла.

parent {   opacity: 0.7;  }    child {   opacity: 1;  }    

В подобной ситуации элемент child будет на 30 % прозрачным, несмотря на то что значение opacity равно единице.

Примеры использования

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

.target {   background: black;   opacity: 0.5;  }

Полупрозрачным становится не только фон блока target, но и текст.

Пример 2. Динамическое управление прозрачностью. Значение свойства CSS opacity блока target изменяется при наведении на него курсора.

.target {   opacity: 0.2;  }    .target:hover {   opacity: 1;  }

Динамическая прозрачность

Последний пример демонстрирует, что прозрачные элементы продолжают реагировать на события страницы, такие как наведение курсора. Это позволяет использовать javascript для управления свойством CSS opacity, а также применять механизмы transition и animation для плавного изменения режима отображения.

Чтобы получить доступ к прозрачности из скрипта, нужно обратиться к объекту style конкретного элемента.

// получение текущего значения прозрачности  var opacity = element.style.opacity;    // установка нового значения  element.style.opacity = 0.4;    

Плавное исчезновение блока можно реализовать с помощью CSS-свойства transition:

element {   opacity: 0.1;   transition: opacity 1000ms;  }    element:hover {   opacity: 0.8;   transition: opacity 2000ms;  }

Теперь узел element при наведении мышки будет изменять прозрачность от 10 до 80 % в течение одной секунды, а при уходе курсора — тускнеть до исходного значения в течение двух секунд.

Свойство CSS opacity в сочетании с механизмом transition позволяет создавать красивые эффекты.

Альфа-канал вместо opacity

Главные тонкости механизма opacity в CSS:

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

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

fb.ru

Never use opacity directly on an image, set it instead on a div containing the image, this will greatly help to make a clean and fully compatible code.

Example:

<div style="filter: alpha(opacity=50);">   <img src="a.png" alt="" width="100" height="100" />  </div>      

If you plan on using RGBA PNG images (RGB with transparency layer, not indexed) in an IE6-compatible application, it is needed to use DirectX (DX6 or above required) image filters, but I don’t recommend it at all exept for this special case.

Example:

<span style="width: 100px; height: 100px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='a.png', sizingMethod='scale');">   <img src="transparent.gif" width="1" height="1" alt="" style="display: block;" />  </span>  

Note the span containing the filter. The inner image is a transparent filler 1px x 1px (smallest size). I noticed it was better than a   (non-breakable space) because of zoom text (can break design) and the unability to set a 1px sized text.

I found a JavaScript code that can replace all your PNGs in the page, I just changed it a bit to handle IE8. Works fine and quite fast, althrough there are some limitations:
– Images inside display: none elements will not be affected (IE bug ?). It may be the same with visibility: hidden and opacity=0, test yourself.
– Image are changed after all the page has loaded. The script will start even if loading has been interrupted by the user (ESC key, …) or some images are missing or unreachables.
– Once modified, images are no more IMG tags but SPAN: it becomes impossible to set image properties directy via scripting (JavaScript, Visual Basic, …) if image-specific codes are used:

Wrong (JavaScript code):

document.getElementById('myimage').src = 'b.png';  

Correct (JavaScript code, a bit bigger):

var img = document.getElementById('myimage');  if (img.nodeName.toLowerCase() == 'span') // <span> tag ?  {   img.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='b.png', sizingMethod='scale')';   // Change "image" dimensions if needed (example, optional):   img.style.width = '100px'; // Don't forget the unit !   img.style.height = '100px'; // Same here  }  else  {   img.src = 'b.png'; // Standard method (much easier !)  }  

Try to make a function of this if used many times.

PNG auto transform script (here is an XHTML fragement):

<?xml version="1.0" encoding="UTF-8" ?>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  <html>  <head>  <title>IE6 PNG loader test page</title>  <script type="text/javascript">  // <![CDATA[  function correctPNG()  {   if ((navigator.appName == 'Microsoft Internet Explorer') && (navigator.appVersion.indexOf('MSIE 7') == -1) && (navigator.appVersion.indexOf('MSIE 8') == -1)) // IE < v7.x (+ Maxthon v1.x/v2.x , AOL , ...)   {   for(var i=0; i<document.images.length; i++)   {   var img = document.images[i]   var imgName = img.src.toUpperCase()   if (imgName.substring(imgName.length-3, imgName.length) == "PNG")   {   var imgID = (img.id) ? "id='" + img.id + "' " : ""   var imgClass = (img.className) ? "class='" + img.className + "' " : ""   var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "   var imgStyle = "display:inline-block;" + img.style.cssText   if (img.align == "left") imgStyle = "float:left;" + imgStyle   if (img.align == "right") imgStyle = "float:right;" + imgStyle   if (img.parentElement.href) imgStyle = "cursor:pointer;" + imgStyle   var strNewHTML = "<span " + imgID + imgClass + imgTitle   + " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"   + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"   + "(src='" + img.src + "', sizingMethod='scale');"></span>"   img.outerHTML = strNewHTML   i = i-1   }   }   }  }  // ]]>  </script>  </head>  <body onload="correctPNG();">  <!--- Main content -->  <div><img src="a.png" width="100" height="100" alt="" /></div>  </body>  </html>

I rather use body onload than its JavaScript equivalent (window.onload), seems to work much better, with increased stability.

css-tricks.com

Что можно сделать при помощи данной технологии?

Используя прозрачность CSS, можно варьировать степень прозрачности как страницы в целом, так и отдельных ее частей:

  • Шапка сайта может быть полупрозрачной, а логотип на ней – совершенно непрозрачным;
  • Прозрачными могут быть боковые поля, подвал и т.д.;
  • Часто с помощью изменения степени прозрачности достигается эффект плавной смены изображений:
  • Прозрачными и полупрозрачными могут быть всплывающие блоки, формы авторизации, фото галереи и другие элементы сайта.

Как задается прозрачность CSS: формальности

За техническую сторону создания этого эффекта отвечает CSS свойство opacity (примечательно, что в переводе на русский язык это слово и означает «прозрачность»).

Данное свойство характеризуется следующими признаками:

  • значение задается в цифровом выражении (от 0 до 10; чем больше число – тем меньшей будет прозрачность объекта);
  • применяется ко всем элементам, имеющимся на странице (то есть можно задать при помощи CSS прозрачность блока или текста);
  • не наследуется.

Планируя использовать этот эффект, надо знать, как он поддерживается в разных браузерах:

Техническая сторона вопроса: задаем прозрачность фона

Одним из самых важных в верстке (и поэтому распространенных) является вопрос о том, как задать прозрачность фона в CSS. Ничего сложного здесь нет.

Код элемента, с которым ведется работа, должен выглядеть следующим образом (в скобках указаны варианты, которые срабатывают в разных браузерах):

При этом надо помнить, что заданная элементу прозрачность впоследствии наследуется дочерними элементами. То есть, если внутри фона есть картинка, текст или что-то еще – оно автоматически изменит степень прозрачности. Это не всегда допустимо.

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

Исходный код:

Видоизменяем код на такой:

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

Техническая сторона вопроса: задаем прозрачность блока

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

Если же нужно, чтобы дочерний блок не наследовал прозрачность родительского – все обстоит сложнее! Решить данный вопрос можно следующим образом:

HTML код:

CSS стили:

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

www.internet-technologies.ru

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

CSS свойство background-color устанавливает цвет фона для элемента. Фон охватывает общий размер элемента, включая внутренние отступы и рамки (не распространяясь на внешний отступ — margin).

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

Цвет фона можно установить различными способами, к примеру: указать имя цвета, использовать шестнадцатеричные значения или с помощью синтаксиса RGB, как именно это сделать, вы можете увидеть в примере ниже, где показано применение различных способов задания цвета фона. Все доступные названия цветов, их шестнадцатеричные значения и визуальное отображение оттенка вы можете посмотреть в таблице цветов.

Примечание: если добавить свойство background-color к тегу <body>, цвет заполнит все окно браузера. Однако если так же добавить цвет фона для тега <html>, то фон элемента <body> будет заполнять только область с содержимым, если оно есть.

Совет: вместо монотонного цвета, в качестве фона, можно использовать любое изображение, для этого стоит воспользоваться свойством background-image. Так же стоит обратить внимание на свойство background-clip, используемое для определения области в элементе, на которую будет распространяться фон.

Значение по умолчанию: transparent
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
Версия: CSS1
Синтаксис JavaScript: object.style.backgroundColor=»#00FF00″

Синтаксис

background-color: цвет|transparent|inherit;

Значения свойства

Значение Описание
цвет Цвет фона можно установить различными способами: указать имя цвета, использовать шестнадцатеричные значения, с помощью синтаксиса rgb (rgba) или hsl (hsla).
transparent Указывает, что фон будет прозрачным.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

puzzleweb.ru

Transparent Image

The opacity property can take a value from 0.0 — 1.0. The lower value, the more transparent:

Note: IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 — 100. A lower value makes the element more transparent.


Transparent Hover Effect

The opacity property is often used together with the :hover selector to change the opacity on mouse-over:

Example explained

The first CSS block is similar to the code in Example 1. In addition, we have added what should happen when a user hovers over one of the images. In this case we want the image to NOT be transparent when the user hovers over it. The CSS for this is opacity:1;.

When the mouse pointer moves away from the image, the image will be transparent again.

An example of reversed hover effect:



Transparent Box

When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read:


Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:

You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) — which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.


Text in Transparent Box

First, we create a <div> element (class="background") with a background image, and a border. Then we create another <div> (class="transbox") inside the first <div>. The <div class="transbox"> have a background color, and a border — the div is transparent. Inside the transparent <div>, we add some text inside a <p> element.


www.w3schools.com

Today’s blog post will show you how to make a background layer half transparent, but keep the text on top as a solid color. A common problem occurs in browsers if you set a background opacity to transparent, all of the children will also become transparent. One solution in the older days was to use a png image, but we can also implement a pure CSS solution thanks to RBGa colors.

Using RGBa colors, we can set the alpha background along with an opacity value, and it will only affect the element it is applied to, not it’s children ! Sounds perfect, let’s take a look at how to implement it:

/* default fallback */  background: rgb(255, 255, 255) transparent;  /* nice browsers */  background: rgba(255, 255, 255, 0.8);  

The example above will show a semi-transparent white background, and all child elements as having a solid opacity. You can see we use rgb(255, 255, 255) as the default for any browsers that might have problems using RGBa. We then use rgba(255, 255, 255, 0.8) for most modern browsers, which sets the background color to white, and a transparency level of 80%. This works fine in Chrome, Safari and FireFox 3+ etc, however our dear friend IE fails in all versions.

For IE6+, we must used Microsofts implementation of their gradient and filter properties. By using gradients combined with an 8 color HEX value, we can achieve the same semi-transparent white background as other browsers.

/* IE 6/7 */  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF);  /* IE8 */  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)";   

You can see the values of the start and end colors are “#CCFFFFFF”. The last 6 characters refer to the white background color, and the first 2 characters are the alpha hex value which control the opacity level. So if we want to set an opacity of 80%, we would normal use 0.8 as our value, however for alpha hex value we need to do some calculations. You can use this tool I wrote below to quickly calculate it for you. Simply enter your normal opacity value like 0.8 amd hit convert, which will give us the “cc” alpha hex value we need (“cc” in our case).

So our cross browser solution now looks like this:

/* default fallback */  background: rgb(255, 255, 255) transparent;  /* nice browsers */  background: rgba(255, 255, 255, 0.8);  /* IE 6/7 */  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF);  /* IE8 */   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)";  

This should work in all browsers from IE6+, Chrome, FF 3+ etc. Here is an example of a semi-transparent gray div on top of a red background:

davidshariff.com


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector