Прозрачная обводка (border)
Всем привет. Верстаю сайт. Создаю веб-дизайн для сайта и столкнулся с такой проблемой, что необходимо сделать прозрачную обводку border div блока. Такой вариант нужен, так как фон динамичный и обводка блоков должна подходить под фон. Первое, что пришло в голову, это сделать новый блок под основным блоком, ему задать background-image картинку png формата с прозрачностью 50%. нижний блок сделать шире и выше на 2 пх. После с помощью margin-top: -1px; margin-left: -1px; сместить нижний блок. Вариант работающий. Но при помощи resize браузера происходят баги — смещение нижнего блога в произвольную сторону. Так же, мне кажется, этот метод довольно не удобный. Как можно реализовать прозрачную обводку. Заранее спасибо.
Отслеживать
8,667 18 18 золотых знаков 73 73 серебряных знака 181 181 бронзовый знак
задан 29 мар 2012 в 15:38
967 5 5 золотых знаков 23 23 серебряных знака 54 54 бронзовых знака
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
.roundedBox
Отслеживать
ответ дан 29 мар 2012 в 15:53
3,049 27 27 серебряных знаков 48 48 бронзовых знаков
Спасибо, конечно. Но сделал альтернативный и РАБОТАЮЩИЙ вариант: box-shadow: 0 0 1px rgba(0, 0, 0, 0.80);
opacity
Примечание: браузер IE8 и более ранние версии поддерживает альтернативное CSS свойство filter .
Пример: filter: Alpha(opacity=50);
Описание
CSS свойство opacity (в переводе с анг. — непрозрачность) устанавливает уровень прозрачности элемента. Прозрачность задаётся числом от 0 (полная прозрачность) до 1 (полная непрозрачность).
Значение прозрачности применяется ко всему элементу, включая его содержимое, даже не смотря на то, что значение не наследуется дочерними элементами. Таким образом элемент, его содержимое, его дочерние элементы и содержимое дочерних элементов имеют одинаковый уровень прозрачности, даже если у самого элемента и его дочерних элементов установлены разные значения прозрачности.
Прозрачность картинки задаётся также с помощью CSS свойства opacity , примеры и код вы можете посмотреть в нашем самоучителе в уроке «CSS: Прозрачность».
Если вам нужно установить прозрачность только для фона блока, то следует использовать CSS свойство background или background-color со значением цвета в формате RGBA или HSLA. Если нужно задать прозрачность только для текста, то следует использовать свойство color со значением цвета в формате RGBA или HSLA.
| Значение по умолчанию: | 1 |
|---|---|
| Применяется: | ко всем элементам |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.opacity=0.5 |
Синтаксис
opacity: число|inherit;
opacity
CSS-свойство opacity устанавливает непрозрачность элемента. Непрозрачность — это степень, в которой содержимое скрывается за элементом, является противоположностью прозрачности.
Интерактивный пример
opacity применяется к элементу в целом, включая его содержимое, даже если значение не наследуется дочерними элементами. Таким образом, элемент и его потомки имеют одинаковую непрозрачность относительно фона элемента, даже если они имеют различную непрозрачность относительно друг друга.
Использование opacity со значением, отличным от 1 , помещает элемент в новый контекст наложения (en-US) .
background: rgba(0, 0, 0, 0.4);
Синтаксис
Значения
| : число в пределах от 0.0 до 1.0 , включительно, или проценты в пределах от 0% до 100% , включительно, представляет непрозрачность канала (т.е. значение его альфа-канала). Любое значение вне интервала, хотя и является валидным, округляется до ближайшего предела в диапазоне. | Значение | Действие |
|---|---|---|
| 0 | Элемент полностью прозрачен (он становится невидимым). | |
| Любое число строго между 0 и 1 | Элемент полупрозрачный (т.е. содержимое элемента можно увидеть). | |
| 1 (значение по умолчанию) | Элемент полностью непрозрачный (видимый). |
Формальный синтаксис
Примеры
Базовый пример
div background-color: yellow; > .light opacity: 0.2; /* Едва видимый текст на фоне */ > .medium opacity: 0.5; /* Видимость текста более чёткая на фоне */ > .heavy opacity: 0.9; /* Видимость текста очень чёткая на фоне */ >
div class="light">You can barely see this.div> div class="medium">This is easier to see.div> div class="heavy">This is very easy to see.div>
Различная непрозрачность с :hover
img.opacity opacity: 1; filter: alpha(opacity=100); /* IE8 и ниже */ zoom: 1; /* Триггеры "hasLayout" в IE 7 и ниже */ > img.opacity:hover opacity: 0.5; filter: alpha(opacity=50); zoom: 1; >
img src="https://developer.mozilla.org/mdn-social-share.png" alt="MDN logo" width="128" height="146" class="opacity" />
Проблемы доступности
Если непрозрачность текста регулируется, важно убедиться, что коэффициент контрастности между цветом текста и фоном, на котором размещён текст, достаточно высок, чтобы люди, испытывающие проблемы со слабым зрением, могли читать содержимое страницы.
Коэффициент цветовой контрастности определяется путём сравнения яркости текста с откорректированной непрозрачностью и значением цвета фона. Чтобы соответствовать действующим Рекомендациям по доступности веб-контента (WCAG), для текстового содержимого требуется соотношение 4.5:1 и 3:1 для более крупного текста, такого как заголовки. Большой текст определяется как 18.66px и жирный или крупнее, или 24px или выше.
- WebAIM: Color Contrast Checker
- MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
- Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Спецификации
| Specification |
|---|
| CSS Color Module Level 4 # transparency |
| Начальное значение | 1 |
|---|---|
| Применяется к | все элементы |
| Наследуется | нет |
| Проценты | map to the range [0,1] |
| Обработка значения | Тоже, что и указанное значение, после обрезки number до диапозона [0.0, 1.0]. |
| Animation type | by computed value type |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 6 янв. 2024 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.
How to Set Border Opacity with CSS
As it’s known, the CSS opacity property makes the whole element semi-transparent. That’s why we cannot use it to make set the opacity of the border. To set the border opacity, we can use a RGBA color value with the border property.
If you have such difficulty when setting border opacity, you are in the right place. Let’s see how this is done.
Watch a video course CSS — The Complete Guide (incl. Flexbox, Grid & Sass)
Create HTML
h2>Example h2> div>Set a border opacity with CSS div>Add CSS
- Use the padding property.
- Add the border property and use a “rgba” value for it.
- Set the background-clip property to “padding-box” for Firefox 4+, Chrome, and Opera.
- Use the -webkit- prefix with the background-clip for Safari.
div < padding: 10px; border: 1px solid rgba(255, 0, 0); border-top: 1px solid rgba(255, 0, 0, .3); -webkit-background-clip: padding-box; background-clip: padding-box; >The full example looks like the following.
Example of setting border opacity:
html> html> head> title>The title of the document title> style> div < padding: 10px; border: 1px solid rgba(255, 0, 0); border-top: 1px solid rgba(255, 0, 0, .3); -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* Firefox 4+, Opera, Chrome */ > style> head> body> h2>Example h2> div>Set a border opacity with CSS div> body> html>Result
Set a border opacity with CSS
However, this method may have some problems, as some browsers don’t understand the RGBA format and won’t display any border at all. For that, we can use two border properties, one of them with RGB, and the other with RGBA color. If possible, the browser will use the second one, if not, the first.
Example of setting border opacity with an alternative:
html> html> head> title>The title of the document title> style> div < padding: 10px; border: 1px solid rgba(255, 0, 0); border-top: 2px solid rgb(246, 176, 177); border-top: 2px solid rgba(255, 0, 0, .2); -webkit-background-clip: padding-box; background-clip: padding-box; > style> head> body> h2>Example h2> div>Set a border opacity with CSS div> body> html>