jquery CSS创建透明div

ecr0jaav  于 12个月前  发布在  jQuery
关注(0)|答案(4)|浏览(157)

有没有办法让一个div HTML元素变成半透明的?

9w11ddsr

9w11ddsr1#

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

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

字符串
注意:现在在每一个浏览器中,你只需要opacity,参见CanIUse。它甚至在IE9中也可以工作。

jum4pzuy

jum4pzuy2#

这将适用于所有浏览器

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/

qzlgjiam

qzlgjiam3#

使用一个背景PNG文件,这是半透明的,并希望你不必支持IE6?

p4rjhz4m

p4rjhz4m4#

如果你只想要div的background是半透明的,而不是里面的任何文本和元素,你可以简单地将background-color设置为一个半透明的(即alpha < 1)。
一个例子是our website,这里是一个最小化的例子:

<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>

字符串

相关问题