Background image transparency with CSS3?

后端未结

关注

 8  2168

生来不讨喜

Is there a way to add transparency to a background-image using CSS3?

相关标签:

8条回答

再見小時候

2020-12-29 07:30

yes, IE9, Firefox, Chrome, Opera, and Safari use the property opacity for transparency. The opacity property can take a value from 0.0 - 1.0. A lower value makes the element more transparent.

IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 - 100. A lower value makes the element more transparent.

img
{
    opacity: 0.5; /*(Range = 0.0 to 1.0)*/
    filter: alpha(opacity = 50); /* (Range = 0% to 100%) For IE8 & ealier */
}

Also we can give OPACITY to any <DIV> tag and make transparent boxes.

Here is the *

FULL EXAMPLE

<html>
<head>
<style>
div.background
  {
  width:500px;
  height:250px;
  background:url(klematis4_small.jpg) repeat;
  border:2px solid black;
  }
div.transbox
  {
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */
  }
div.transbox p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  }
</style>
</head>

<body>

<div class="background">
<div class="transbox">
<p>
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

</body>
</html>

0 讨论(0)

长情又很酷

2020-12-29 07:31
image opacity is not a CSS3 property it is a CSS2 property.There are no cross-browser compatibility issues using this property.It works fine even in older versions of IE.

The following is the syntax
```
img {
    opacity: 0.7;
    filter: alpha(opacity = 70); /* For IE */
}
```
the value for opacity must be between 0 and 1. 0 being invisible and 1 being opaque.

for transparency to DOM elements background-color property rgba can be used as
```
div {
   background: rgba(200, 54, 54, 0.5); 
}
```
as there are compatibility issues with older versions of IE a fallback is advised.
```
div {
    background: rgb(200, 54, 54); /* The Fallback */
    background: rgba(200, 54, 54, 0.5); 
}
```
IE conditional sheets can be used as well for better performance.
```
<!--[if IE]>
   <style type="text/css">
   .color-block { 
          background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000); 
   zoom: 1;
} 

</style>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

上一页 1 2