Как сделать прозрачный фон без фонового изображения?

Ответ 1

Если вы хотите, чтобы цвет фона был прозрачным, а не дочерним, используйте

background-color: rgba(0,0,0,.5); // Sets to 50% transparent

Более подробную информацию см. на этой странице - это спецификация css3, которая не будет отображаться в каждом браузере:

http://www.css3.info/introduction-opacity-rgba/

Ответ 2

Да.

Set   background-color: transparent;

и не используйте opacity, так как это делает полупрозрачным весь div.

обновил ваш пример в http://jsfiddle.net/eU7By/1/

ОБНОВЛЕНИЕ после комментариев

вы можете использовать rgba для фона-фона, как упоминает @DHuntrods. IE нуждается в некоторой настройке курса. http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/

Ответ 3

Самое кросс-браузерное решение - использовать свойство непрозрачности на дополнительном "абсолютно позиционированном" дочернем элементе (в относительно или абсолютно позиционированном родителе): он должен содержать только цветной прозрачный фон.

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

Ответ 4

Мне нужно было использовать прозрачный gif 30x30 в качестве фона.

background:url('absolute path here');