Question

我希望div拥有透明的背景我尝试使用background-color和opacity执行此操作，但问题是边框和内部文本也变得透明。 Example here.

这可以在不使用透明PNG背景图像的情况下实现吗？

Answer 1

如果您只想让背景颜色透明而不是儿童内容，请使用

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

有关详细信息，请参阅此页面 - 这是css3规范，因此不会显示在每个浏览器中：

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

Answer 2

是

设置 background-color: transparent;

并且不要使用opacity，因为这是使整个div半透明的原因。

在http://jsfiddle.net/eU7By/1/

更新了您的示例评论后

更新

您可以使用rgba作为背景颜色，如@DHuntrods所述。 IE需要对'课程进行一些调整.. http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/

Answer 3

最跨浏览器的解决方案是在另一个“绝对定位”子元素上使用opacity属性（在相对或绝对定位的父元素中）：它只包含彩色透明背景

然后，您可以使用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;
 }

了解更多： Set opacity of background image without affecting child elements

屏幕截图样张 IE7 IE8 IE9 IE10 IE11

ps：我没有为Chrome，Firefox和＆添加屏幕截图Safari因为它们是“更好”的浏览器......相信我，它也适用于它们。

Answer 4

我不得不使用30x30透明gif作为背景。

background:url('absolute path here');

如何制作没有背景图像的透明背景？

4 个答案:

整个代码如下：