CSS Create a transparent div

后端未结

关注

 4  1029

-上瘾入骨i

Is there a way to make a div HTML element half transparent?

相关标签:

4条回答

萌比男神i

2021-01-01 03:06

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 讨论(0)

不要未来只要你来

2021-01-01 03:07

Using a background PNG file which is half transparent, and hoping you don't have to support IE6?

0 讨论(0)
发布评论:

提交评论
- 加载中...
小鲜肉

2021-01-01 03:10
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 讨论(0)
发布评论:

提交评论
- 加载中...

清酒与你

2021-01-01 03:21

With CSS, this is cross browser solution

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

0 讨论(0)