📄 css_image_transparency.asp@output=print
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Image Opacity / Transparency</title>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Keywords" content="xml,tutorial,html,dhtml,css,xsl,xhtml,javascript,asp,ado,vbscript,dom,sql,colors,soap,php,authoring,programming,training,learning,beginner's guide,primer,lessons,school,howto,reference,examples,samples,source code,tags,demos,tips,links,FAQ,tag list,forms,frames,color table,w3c,cascading style sheets,active server pages,dynamic html,internet,database,development,Web building,Webmaster,html guide" />
<meta name="Description" content="Free HTML XHTML CSS JavaScript DHTML XML DOM XSL XSLT RSS AJAX ASP ADO PHP SQL tutorials, references, examples for web building." />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "../../https@ssl./default.htm" : "../../www./default.htm");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3855518-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
<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>
<p>From <b>http://www.w3schools.com</b> (Copyright Refsnes Data)</p>
<h1>CSS Image Opacity / Transparency</h1>
<a href="css_image_gallery.asp"><img border="0" src="../images/btn_previous.gif" width="100" height="20" alt="Previous" /></a>
<a href="css_mediatypes.asp"><img border="0" src="../images/btn_next.gif" width="100" height="20" alt="Next" /></a>
<hr />
<p class="intro">Creating transparent images with CSS is easy.</p>
<hr />
<h2>Examples</h2>
<p><a target="_blank" href="tryit.asp@filename=trycss_image_transparency">
Creating transparent images - mouseover effect</a></p>
<p><a target="_blank" href="tryit.asp@filename=trycss_transparency">Creating a
transparent box with text on a background image</a></p>
<hr />
<p><b>Note:</b> This is not yet a CSS standard. However, it works in all modern
browsers, and is
a part of the W3C CSS 3 recommendation.</p>
<h2>Example 1 - Creating a Transparent Image</h2>
<p>First we will show you how to create a transparent image with CSS.</p>
<p>Regular image:</p>
<img src="klematis.jpg" alt="klematis" width="150" height="113" />
<p>The same image with transparency:</p>
<img src="klematis.jpg" alt="klematis" width="150" height="113"
style="opacity:0.4;filter:alpha(opacity=40)" />
<p>Look at the following source code:</p>
<table width="100%" border="1" class="ex" cellspacing="0" id="table1"><tr><td>
<pre><img src="klematis.jpg" width="150" height="113" alt="klematis"
style="opacity:0.4;filter:alpha(opacity=40)" /></pre>
</td></tr></table>
<br />
Firefox uses the property <b>opacity:x</b> for transparency, while IE uses
<b>filter:alpha(opacity=x)</b>.<p><b>Tip:</b> The CSS3 syntax for transparency
is <b>opacity:x</b>.</p>
<p>In Firefox (opacity:x) x can be a value from 0.0 - 1.0. A lower value makes
the element more transparent.</p>
<p>In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower value makes the
element more transparent.</p>
<hr />
<h2>Example 2 - Image Transparency - Mouseover Effect</h2>
<p>Mouse over the images:</p>
<img src="klematis.jpg" alt="klematis" width="150" height="113"
style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
<img src="klematis2.jpg" alt="klematis" width="150" height="113"
style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
<p>The source code looks like this:</p>
<table width="100%" border="1" class="ex" cellspacing="0" id="table3"><tr><td>
<pre><img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /></pre>
<pre><img src="klematis2.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /></pre>
</td></tr></table>
<p>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.</p>
<p>The syntax for this in Firefox is: <b>this.style.opacity=1</b> and the
syntax in IE is: <b>this.filters.alpha.opacity=100</b>.</p>
<p>When the mouse pointer moves away from the image, we want the image to be
transparent again. This is done in the onmouseout attribute.</p>
<hr />
<h2>Example 3 - Text in Transparent Box</h2>
<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>
<p>The source code looks like this:</p>
<table width="100%" border="1" class="ex" cellspacing="0" id="table2"><tr><td>
<pre><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></pre>
<pre><body></pre>
<pre><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></pre>
<pre></body>
</html></pre>
</td></tr></table>
<p>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. This div also have a fixed width, a background
image, and a border. In addition we make this div transparent.</p>
<p>Inside the transparent div, we add some text inside a p element.</p>
<hr />
<a href="css_image_gallery.asp"><img border="0" src="../images/btn_previous.gif" width="100" height="20" alt="Previous" /></a>
<a href="css_mediatypes.asp"><img border="0" src="../images/btn_next.gif" width="100" height="20" alt="Next" /></a>
<p>From <b>http://www.w3schools.com</b> (Copyright Refsnes Data)</p>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -