CSS Image Opacity / Transparency

最新推荐文章于 2023-06-28 18:21:04 发布

不断学习的ITer

最新推荐文章于 2023-06-28 18:21:04 发布

阅读量1.3k

点赞数

分类专栏： HTML特殊标签/CSS 文章标签： image css filter border firefox class

HTML特殊标签/CSS 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

http://www.w3schools.com/css/css_image_transparency.asp

Note: This is not yet a CSS standard. However, it works in all modern browsers, and is a part of the W3C CSS 3 recommendation.

Example 1 - Creating a Transparent Image

First we will show you how to create a transparent image with CSS.

Regular image:

The same image with transparency:

Look at the following source code:

Firefox uses the property opacity:x for transparency, while IE uses filter:alpha(opacity=x).

Tip: The CSS3 syntax for transparency is opacity:x.

In Firefox (opacity:x) x can be a value from 0.0 - 1.0. A lower value makes the element more transparent.

In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower value makes the element more transparent.

Example 2 - Image Transparency - Mouseover Effect

Mouse over the images:

The source code looks like this:

We see that the first line of the source code is similar to the source code in Example 1. In addition, we have added an onmouseover attribute and an onmouseout attribute. The onmouseover attribute defines what will happen when the mouse pointer moves over the image. In this case we want the image to NOT be transparent when we move the mouse pointer over it.

The syntax for this in Firefox is: this.style.opacity=1 and the syntax in IE is: this.filters.alpha.opacity=100.

When the mouse pointer moves away from the image, we want the image to be transparent again. This is done in the onmouseout attribute.

Example 3 - Text in 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. This is some text that is placed in the transparent box.

The source code looks like this:

<html>
<head>
<style type="text/css">
div.background
   {
   width:500px;
   height:250px;
   background:url(klematis.jpg) repeat;
   border:2px solid black;
   }
div.transbox
   {
   width:400px;
   height:180px;
   margin:30px 50px;
   background-color:#ffffff;
   border:1px solid black;
   /* for IE */
   filter:alpha(opacity=60);
   /* CSS3 standard */
   opacity:0.6;
   }
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 (class="background") with a fixed height and width, a background image, and a border.Then we create a smaller div (class="transbox") inside the first div element. The "transbox" div have a fixed width, a background color, and a border - and it is transparent. Inside the transparent div, we add some text inside a p element.

不断学习的ITer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS Image Opacity / Transparency

http://www.w3schools.com/css/css_image_transparency.aspNote: This is not yet a CSS standard. However, it works in all modern browsers, and
复制链接

扫一扫