Я хотел бы, чтобы div имел прозрачный фон.
Я попытался сделать это с помощью background-color и opacity, но проблема в том, что граница и текст внутри становятся также прозрачными. Пример здесь.
Можно ли достичь этого без использования прозрачного фонового изображения PNG?
Если вы хотите, чтобы цвет фона был прозрачным, а не дочерним, используйте
background-color: rgba(0,0,0,.5); // Sets to 50% transparent
Более подробную информацию см. на этой странице - это спецификация css3, которая не будет отображаться в каждом браузере:
Да.
Set background-color: transparent;
и не используйте opacity, так как это делает полупрозрачным весь div.
обновил ваш пример в http://jsfiddle.net/eU7By/1/
ОБНОВЛЕНИЕ после комментариев
вы можете использовать rgba для фона-фона, как упоминает @DHuntrods. IE нуждается в некоторой настройке курса. http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/
Самое кросс-браузерное решение - использовать свойство непрозрачности на дополнительном "абсолютно позиционированном" дочернем элементе (в относительно или абсолютно позиционированном родителе): он должен содержать только цветной прозрачный фон.
Затем вы можете использовать свойство opacity, чтобы сделать этот элемент прозрачным. Поскольку этот элемент не имеет дочерних элементов, непрозрачность не влияет на какой-либо другой элемент.
Opacity - это свойство IE5 +, просто используйте (см. http://css-tricks.com/snippets/css/cross-browser-opacity/):
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE 5-7 */
-moz-opacity: 0.5; /* Netscape */
-khtml-opacity: 0.5; /* Safari 1.x */
opacity: 0.5; /* Good browsers */
см. пример jsFiddle http://jsfiddle.net/DUjzX/1/
HTML:
<div class="my-cool-wrapper">
<div class="text-and-images-on-top">
<p>Here some content (text AND images) "on top of the transparent background"</p>
<img src="http://i.imgur.com/LnnghmF.gif">
</div>
<div class="transparent-background">
</div>
</div>
CSS:
.my-cool-wrapper {
position: relative;
}
.my-cool-wrapper .text-and-images-on-top {
padding: 10px 15px 19px 15px;
z-index: 1;
position: relative; /* needed to enable the z-index */
}
.my-cool-wrapper .transparent-background {
position: absolute;
top: 0;
width: 100%;
height: 100%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; /* IE 8 */
filter: alpha(opacity=10); /* IE 5-7 */
-moz-opacity: 0.1; /* Netscape */
-khtml-opacity: 0.1; /* Safari 1.x */
opacity: 0.1; /* Good browsers */
background-color: blue;
}
подробнее: Установите непрозрачность фонового изображения, не затрагивая дочерние элементы
Скриншоты доказательств
ps: я не добавлял скриншоты для Chrome, Firefox и Safari, так как это гораздо более "лучшие" браузеры... поверьте мне, это тоже работает для них.
Мне нужно было использовать прозрачный gif 30x30 в качестве фона.
background:url('absolute path here');