CSS 创建一个透明的div

发布于 2024-10-17 10:13:04 字数 29 浏览 1 评论 0原文

有没有办法让 div HTML 元素半透明？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

走野 2024-10-24 10:13:04

使用CSS，这是跨浏览器解决方案

div {
    opacity: 0.5;
    filter: alpha(opacity = 0.5);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}

注意：现在在每个浏览器中，您只需要opacity，请参阅我可以使用。即使在 IE9 中也能正常工作。

With CSS, this is cross browser solution

div {
    opacity: 0.5;
    filter: alpha(opacity = 0.5);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}

NOTE: Right now in every browser, you only need opacity see CanIUse. It works even in IE9.

回复收藏 0 原文

醉生梦死 2024-10-24 10:13:04

这适用于每个浏览器

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:”alpha(opacity=50)”;
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

如果您不希望透明度影响整个容器及其子容器，请检查此解决方法 http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

This will work with every browser

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:”alpha(opacity=50)”;
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

If you don't want transparency to affect the entire container and it's children, check this workaround http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

回复收藏 0 原文

源来凯始玺欢你 2024-10-24 10:13:04

使用半透明的背景 PNG 文件，并希望不必支持 IE6？

回复收藏 0 原文

土豪 2024-10-24 10:13:04

如果您只希望 div 的背景半透明，而不是其中的任何文本和元素，则只需将背景颜色设置为透明颜色（即 alpha < 1）。

一个示例位于我们的网站，这里是一个最小化的示例：

<html>
<head>
  <title>Transparency test</title>
  <style type="text/css">
    body {
      background-image: url(http://www.fencing-game.de/style/background6.png);
    }
    #trans {
      background-color: rgba(255,0,0,0.5);
      max-width: 80ex;
    }
    p {
    max-width: 70ex;
    margin: auto;
    }
    #nontrans {
      background-color: rgb(255,255, 0);
    }
  </style>
</head>
<body>
  <div id="trans">
    <p>normal text</p>
    <p id="nontrans">nontransparent</p>
    <p>normal text</p>
  </div>
</body>

If you only want the background of your div semi-transparent, not any text and elements inside it, you can simply set a background-color to a transparent-one (i.e. with alpha < 1).

One example is at our website, a minimized example here:

<html>
<head>
  <title>Transparency test</title>
  <style type="text/css">
    body {
      background-image: url(http://www.fencing-game.de/style/background6.png);
    }
    #trans {
      background-color: rgba(255,0,0,0.5);
      max-width: 80ex;
    }
    p {
    max-width: 70ex;
    margin: auto;
    }
    #nontrans {
      background-color: rgb(255,255, 0);
    }
  </style>
</head>
<body>
  <div id="trans">
    <p>normal text</p>
    <p id="nontrans">nontransparent</p>
    <p>normal text</p>
  </div>
</body>

回复收藏 0 原文

~没有更多了~