Правильная прозрачность
Однажды мне понадобилось сделать прозрачные боковые поля для одного дизайна. Я решил использовать прозрачность CSS.
Но каково было узнать, что все элементы внутри прозрачного блока тоже становятся прозрачны и это никак не изменить :-(, тогда мне пришлось использовать прозрачный png.
Недавно я наткнулся на замечательную технику, позволяющую устранить эту проблему, ею я и хочу с вами любезно поделиться.
Техника заключается в подложке прозрачного блока в основной блок, который вы хотите сделать прозрачным.
Вот так выглядит наш блок:
< h1 >Привет, я прозрачный блок
Текст внутри блока. Текст внутри блока. Текст внутри блока.
Теперь добавим прозрачную подложку:
< div class =«content» >
< h1 >Привет, я прозрачный блок
Текст внутри блока. Текст внутри блока. Текст внутри блока.
Теперь перейдем к оформлению css:
#container padding:20px;
width:300px;
color:#FFFFFF;
position:relative;
float:left;
margin-left:20px;
overflow:hidden;
>
#container .transparency opacity:0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
background-color:#000000;
width:340px;
height:1500px;
position:absolute;
top:0px;
left:0px;
z-index:-1;
>
Готово! Теперь все элементы внутри блока не изменят свою прозрачность. Для полного счастья, я решил написать небольшой скрипт на jQuery, который всё автоматизирует.
Вам будет достаточно лишь добавить класс transp к вашему блоку:
< h1 >Привет, я прозрачный блок
Текст внутри блока. Текст внутри блока. Текст внутри блока.
И конечно, сам jQuery код:
$( document ).ready( function () $( «.transp» ).wrapInner( » ).children().addClass( «content» );
$( «.transp .content» ).before( » ).prev().addClass( «transparency» );
>);
На мастера jQuery я, конечно, не претендую, но это работает!
Как сделать слой полупрозрачным?
Сделать блочный элемент со всем его содержимым полупрозрачным.
Решение
Для изменения степени прозрачности элемента применяется стилевое свойство opacity со значением от 0 до 1, где 0 соответствует полной прозрачности, а 1, наоборот, непрозрачности объекта. В браузере Internet Explorer это свойство не работает, поэтому специально для него приходится использовать filter , свойство, не входящее в спецификацию CSS. В примере 1 показано, как установить прозрачность слоя для всех браузеров.
Пример 1. Полупрозрачный слой
HTML5 CSS 2.1 IE Cr Op Sa Fx
Полупрозрачный слой
Результат данного примера показан на рис. 1.
Рис. 1. Полупрозрачный слой в браузере Safari
Свойство filter добавляет прозрачность только для тех элементов, где установлен хотя бы один из размеров ( width или height ) или для элемента задано абсолютное позиционирование ( position : absolute ).
Также учтите, что прозрачность действует на всё содержимое слоя, включая дочерние элементы, и увеличить для них уровень непрозрачности за счет варьирования opacity не получится. В примере 1, где прозрачность слоя установлена как 0.7 , текст внутри слоя получает такое же значение. Его допустимо установить меньше, но превысить значение прозрачности 0.7 текст уже не может.
Как сделать прозрачным ?
А меня дан блок(главный), на нем находятся еще блоки и кнопки, но когда я делаю главный блок полупрозрачным, то и кнопки и остальные блоки, которые находятся на нем, становятся тоже прозрачными, товарищи программисты, помогите пожалуйста )))
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Сделать div прозрачным, а всё на нём оставить непрозрачным
Подскажите, пожалуйста, как можно осуществить данную идею. Цвет div я задаю вот таким вот образом.
Как сделать сайт прозрачным?
Задача- сделать что бы сайт был прозрачным. Что бы сайт просвечивался и был виден задний фон. Как.
Как сделать png прозрачным?
Приветствую! Создаю сайт, столкнулся с проблемой — изображения с расширением png не прозрачны в.
Как сделать чтобы фон у div залезал на другой div
При больших разрешениях 1920px на сайте http://gazetakuponov.ru фон разных блоков урезается, тоесть.
13208 / 6596 / 1041
Регистрация: 10.01.2008
Сообщений: 15,069
Если нужен только прозрачный фон, то прозрачный фон и надо делать:
background-color: rgba(255, 255, 255, 0.75);
Прозрачный фон на css: background
Вы можете часто увидеть на сайтах прозрачный фон, к примеру есть красный фон страницы, а за фоном стоит простая картинка. Так вот в CSS есть замечательные способы создания прозрачности, рассмотрим основные.
1. Через свойство opacity
Способ не совсем правильный, но он будет отображаться во всех браузерах корректно.
Рассмотрим на примере двух блоков, у одного фон картинка, а у другого фон красный и с прозрачностью.
div < width: 300px; height: 300px; position: absolute; top: 0px; left: 0px; >#block1 < backgroun-image('image/image1.jpg'); >#block2 < backround-color: red; opacity: 0.7; // прозрачность >
Прозрачность измеряется в от 0 до 1. Естественно ноль — это полная прозрачность.
2. background-color: RGBA
Здесь тоже самое, только в одном свойстве мы указываем и цвет, и прозрачность.
background-color: rgba(0, 125, 215, 0.7);
Это современный подход, более простой, но не всех браузер отображается корректно.