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

Posted 2023-02-21

【中文标题】如何制作没有背景图片的透明背景？

【英文标题】：How to make a transparent background without background image?

【发布时间】：2011-03-14 11:18:29

【问题描述】：

我希望div 具有透明背景。 我尝试使用background-color 和opacity 来做到这一点，但问题是边框和里面的文本也变得透明了。 Example here.

不使用透明PNG背景图片是否可以实现这一点？

【问题讨论】：

我会用background-color: transparent 回答，但我不认为你在寻找那个。透明背景到底是什么意思？ 编辑： 支持 Gaby 的回答，以防您 寻​​找完全透明的背景。

这不是我要找的。请参阅下面我对 Gaby 的回答的评论。

相关***.com/questions/806000/…

相关***.com/q/4997493/759452

【参考方案1】：

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

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

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

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

【讨论】：

请注意，rgba 与 IE8 不兼容，但与 IE10+（IE9 也可能）、Firefox 3+、Safari 3+、Chrome 兼容。您可以使用 css3pie polyfill 库（请参阅***.com/tags/css3pie/hot）使此功能在 IE8 及以下版本上工作。

【参考方案2】：

是的。

设置 background-color: transparent;

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

在http://jsfiddle.net/eU7By/1/更新了您的示例

更新在 cmets 之后

您可以使用 rgba 作为@DHuntrods 提到的背景颜色。 IE 当然需要一些调整.. http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/

【讨论】：

我的意思是背景颜色应该是半透明的。在我的示例中，黑色背景应该是半透明的（根据不透明度）。

【参考方案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

截图证明

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

【参考方案4】：

我必须使用 30x30 的透明 gif 作为背景。

background:url('absolute path here');