только прозрачный фон

Question

У меня есть div, который содержит заголовок и форму.

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

Я не могу понять, как сделать фон прозрачным, сохраняя поля ввода, а текст полностью непрозрачным.

Я попытался следующие:

var control = $("myControlDiv"); 
control .show(); 

control .setStyle({opacity:"0.60", filter:"alpha(opacity=60)"}); 
var children = control .childElements; 

for (var i = 0 ; i < children.length; i++) 
    children[i].setStyle({opacity:"1.00", filter:"alpha(opacity=100)"}); 

Спасибо за помощь.

Answer 1

Вам необходимо установить фон, а не непрозрачность.

Существуют различные подходы, которые вы можете предпринять. Более эффективные имеют самую бедную поддержку браузера. В этой статье описывается how to implement them in a backwards compatible fashion.

Answer 2

Просто настройте div вокруг формы.

<div style="background:transparent;height:300px;width:300px;"></div>

Answer 3

Ну, для всех браузеров, кроме IE вы можете использовать RGBA CSS 3, который устанавливает цвет и альфа, но только для фона (если вы установите его на цвет фона, конечно). Например, это как 60% прозрачный цвет черный фон будет выглядеть в CSS:

background-color:rgba(0,0,0,0.60); 

Для IE это сложнее, но есть большое руководство для него: http://www.daltonlp.com/view/217

Answer 4

Единственный способ может сделать это:

а) использование CSS3, похожий на пост Cokegod, который является чрезвычайно ограничивающей с точки зрения демографии и т.д.

б) Создайте DIV, где находится контент, разместить фон DIV внутри чтои примените настройку непрозрачности к фоновому слою. Поскольку непрозрачность/фильтр для всего элемента, создание «фонового» div позволяет использовать непрозрачность, и контейнер остается незатронутым. Это немного боль, но это работает.

Надеюсь, это поможет.

Answer 5

Создайте однопиксельный PNG с прозрачностью 60% (или сколько угодно). Установите это как фоновое изображение.

Answer 6

Способ работы вокруг этого состоит в том, чтобы сделать внешний div относительно позиционированным, а внутренний div абсолютно позиционирован. Это позволит внутреннему div иметь другую непрозрачность, чем внешний div. Вы можете проверить приведенную ниже ссылку и демонстрацию.

http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

демонстрационная страница http://www.impressivewebs.com/demo-files/css-opacity/css-opacity-demo.html