Question

Я бы хотел, чтобы div имел прозрачный фон.Я попытался сделать это, используя background-color и opacity, но проблема в том, что граница и текст внутри стали также прозрачными. Пример здесь.

Возможно ли достичь этого без использования прозрачного фонового изображения PNG?

DHuntrods · Answer 1 · 11 июля 2010

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

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

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

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

Gabriele Petrioli · Answer 2 · 11 июля 2010

Да.

Установите background-color: transparent;

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

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

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

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

Adrien Be · Answer 3 · 24 февраля 2014

Самое кросс-браузерное решение - это использовать свойство 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;
 }

читать дальше: Установить непрозрачность фонового изображения, не затрагивая дочерние элементы

Скриншоты с доказательствами IE7 IE8 IE9 IE10 IE11