This lesson assumes that you already have a CSS layout for your myspace page and need to change the transparency of a section.这一教训假设您已经有了一个CSS布局为您的MySpace网页,并需要改变的透明度,有一节。 This lesson also assumes that you have at least introductory experience with Cascading Style Sheets这个教训还假定您至少有介绍经验,层叠样式表
Transparency is a popular way to decorate a page, both in myspace and with other popular services.透明度是一种广受欢迎的方法来装饰的网页,无论是在与MySpace和其他受欢迎的服务。 It is fairly easy to do as long as you keep a few details in mind :这是相当容易做到,只要你保持一些细节注意:
- Know what the code is!知道代码!
- Know exactly what you want to make transparent确切地知道您要透明
- Know how transparent you want to make it知道如何透明要使它
- Remember to set code for both internet explorer and mozilla type browsers请记住设置代码为Internet Explorer和Mozilla类型的浏览器
1 - Know what the code is 1 -知道代码
float:left;
filter:alpha(opacity=80);
-moz-opacity:.80;
opacity:.80;
There are 4 lines to this.有4行了这一点。 The first is the placement.首先是安置。 You have to set a placement for this transparency / opacity change to work.你必须设置一个安置本透明度/不透明变化工作。
We used float:left; This works for IE and Mozilla / Firefox.我们用浮法:左;这一工程IE和Mozilla / Firefox的。
Because you want your code to work on multiple browsers - use all 3 versions of this code由于您希望您的代码工作在多种浏览器-使用所有3版本的此代码
float:left;
filter:alpha(opacity=80);
-moz-opacity:.80;
opacity:.80;
You can tweak those numbers to get different effects.您可以调整这些数字得到不同的效果。 Just note that opacity =100 means it’s opaque.刚才注意到,不透明= 100意味着它的不透明。
2 - Knowing what to make transparent 2 -知道什么使透明
This code goes within the { } for your CSS definition.此代码内不用( )为你的CSS定义。 You most likely won’t want to make your entire layout transparent - although there are some cases where this might be appealing.你最有可能不想让您的整个布局透明的-尽管有一些情况下,这可能是吸引力。 For example :例如:
To make a specific table content transparent place your code within the CSS definition for those tables.为了使某一特定表的内容透明的地方你的代码内的CSS的定义,这些表格。
eg for your myspace tables例如,为您的供应表
table table table {表表表(
float:left;浮法:左;
filter:alpha(opacity=80);过滤器: α (不透明= 80 ) ;
-moz-opacity:.80; ,万盎司,不透明: 0.80 ;
opacity:.80;混浊: 0.80 ;
} )
3 - Know how transparent to make this 3 -了解如何透明,使这个
This is entirely subjective.这完全是主观的。 You simply need to tinker with the numbers to figure out how transparent to make it.你只需要修改的编号,以找出如何透明,使之。 Just remember that # opacity = 100 - opacity transparency.只要记住, #不透明= 100 -不透明的透明度。 Therefore 30 % opacity = 70 % transparent因此, 30 %不透明= 70 %透明
4 - Remember to set code for both internet explorer and mozilla type browsers 4 -请记住设置代码为I nternetE xplorer和M ozilla类型的浏览器
The code listed above covers both IE and Mozilla Firefox.代码上面列出包括IE浏览器和Mozilla Firefox 。 It is somewhat redundant but it is worth keeping.这是有些多余,但它是值得保留。
Do not forget to assign the class to your element or this won’t work! 不要忘记阶级分配到您的部分或这不会工作!
css code: CSS代码:
<style type=”text/css”> <style type="text/css">
.testtable { 。 testtable (
float:left;浮法:左;
filter:alpha(opacity=50);过滤器: α (不透明= 50 ) ;
-moz-opacity:.50; ,万盎司,不透明: 0.50 ;
opacity:.50;混浊: 0.50 ;
} )
</style> “ /样式”
HTML CODE : 代码:
<table width=”50%” border=”0″ class=”testtable” > <table width="50%" border="0" class="testtable" “
<tr>
<td><strong>This is the text in this table </strong></td> <td> <strong>这是文字在此表中“ /强” “ /运输署”
</tr> “ /文”
<tr>
<td><img src=”/images/scrollingimage.jpg” width=”466″ height=”206″></td> <td> <img src="/images/scrollingimage.jpg" width="466" height="206"> “ /运输署”
</tr> “ /文”
<tr>
<td>This is at 50 % opacity </td> <td>这是在50 %不透明“ /运输署”
</tr> “ /文”
</table> “ /表”
We hope you will find this useful.我们希望你会发现这个有益的。 This is another example of how versatile CSS can be for designing your page layouts.这是另一个例子,说明多才多艺的CSS可以设计你的页面布局。