CSS image transparent/opaque
CSS Image Transparent/Opaque
It is easy to create transparent images using CSS.
Note: The CSS Opacity property is part of the W3C’s CSS3 recommendations.
More Examples
Create Transparent Image - Hover Effect
Examples
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<head>
<style>
img
{
opacity:0.4;
filter:alpha(opacity=40); /* 适用 IE8 及其更早版本 */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* 适用 IE8 及其更早版本 */
}
</style>
</head>
<body>
<h1>图片透明度</h1>
<p>opacity 属性通常与 :hover 选择器一起使用，在鼠标移动到图片上后改变图片的透明度：</p>
<img src="https://img.php.cn/upload/article/000/000/015/5c6a756568f26867.jpg" width="150" height="113" alt="klematis">
<img src="https://img.php.cn/upload/article/000/000/015/5c6a757f738b2492.jpg" width="150" height="113" alt="klematis">
<p><b>注意:</b>在 IE 中必须声明 <!DOCTYPE> 才能保证 :hover 选择器能够有效。</p>
</body>
</html>Run Example»
Click the "Run Example" button to view the online example
Create a transparent box with text and a background image
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.background
{
width: 500px;
height: 250px;
background: url(https://img.php.cn/upload/article/000/000/015/5c6a756568f26867.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>Run Instance»
Click the "Run Instance" button to view the online instance
Example 1 - Creating a transparent image
The transparency property in CSS3 is opacity.
First, we will show you how to create a transparent image with CSS.
Normal image:
Same image with transparency:
Look below CSS:
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
IE9, Firefox, Chrome, Opera, and Safari browsers use the transparency attribute to make images opaque. Opacity attribute values range from 0.0 - 1.0. Smaller values make the element more transparent.
IE8 and earlier versions use filter: alpha (opacity= x). The values x can take are from 0 - 100. Lower values make the element more transparent.
Example 2 - Transparency of the image - Hover effect
Move the mouse over the image:
CSS style:
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
The first CSS block is similar to the code in Example 1. Additionally, we've added what happens when the user hovers over one of the images. In this case, we want the image to be clear when the user hovers over it.
This CSS is: opacity=1.
IE8 and earlier versions use: filter:alpha(opacity=100).
When the mouse pointer moves away from the image, the image will regain transparency.
Example 3 - Text in a transparent box
The source code is as follows:
<head>
<style>
div.background
{
width:500px;
height:250px;
background:url(../style/images/klematis.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>
First, we create a div element with a fixed height and width , with a background image and border. Then we create a smaller div element inside the first div. This div also has a fixed width, background color, borders - and it's transparent. Inside the transparent div, we add some text inside the P element.
