|
蓝森林 http://www.lslnet.com 2006年8月25日 8:28
 Css渐变效果的问题?
我要实现的是,表格的背景为渐变色,表格内的文字有一个像素的阴影.现在的问题是,表格内的文字也有渐变效果了.请问各位大人,有何解?代码如下:
[html]
<style type="text/css">
<!--
.unnamed1 {
color:#000000;
cursor: hand;
filter: DropShadow(Color=#ffffff, OffX=1, OffY=1, Positive=120),Alpha(Opacity=100, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100);
}
.unnamed4 {
filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=100);
}
-->
</style>
<table width="429" height="22" class="unnamed4" border="0" cellpadding="0" cellspacing="0" bgcolor="#0000FF">
<tr>
<td align="center"><table width="200" border="0" cellpadding="0" cellspacing="0" class="unnamed1">
<tr>
<td >how are you!</td>
</tr>
</table></td>
</tr>
</table>
<p> </p>
<table width="429" height="22" border="0" cellpadding="0" cellspacing="0" bgcolor="#0000FF">
<tr>
<td align="center"><table width="200" border="0" cellpadding="0" cellspacing="0" class="unnamed1">
<tr>
<td >how are you!</td>
</tr>
</table></td>
</tr>
</table>
[/html] |
哈哈 兄弟遇到的 问题跟我一样
我是这样解决的
既然背景已经渐变了，何不把他作为背景图片来用呢？一样能达到过渡的效果 |
| 有图片当然是可以!只是我希望都能在css中实现,这样的好处理,如果我想调整页面配色方案就不需要再做图片了,只接改CSS样式就可以了!为以后做准备:) |
我找到了一个解决方法,不过不知在ie5.0下是不是可以正常显示,请是ie5.0的朋友测试一下,放谢谢!
代码如下:
[html]
<style type="text/css">
<!--
.unnamed1 {
color:#000000;
cursor: hand;
filter: DropShadow(Color=#ffffff, OffX=1, OffY=1, Positive=135);
}
.unnamed4 {
filter : progid:DXImageTransform.Microsoft.Gradient(enabled=true,startColorStr=#ffffffff,endColorStr=#ff006699);
}
-->
</style>
<table width="429" height="22" class="unnamed4" border="0" cellpadding="0" cellspacing="0" bgcolor="#0000FF">
<tr>
<td align="center"><table width="200" border="0" cellpadding="0" cellspacing="0" class="unnamed1">
<tr>
<td >how are you!</td>
</tr>
</table></td>
</tr>
</table>
<p> </p>
<table width="429" height="22" border="0" cellpadding="0" cellspacing="0" bgcolor="#0000FF">
<tr>
<td align="center"><table width="200" border="0" cellpadding="0" cellspacing="0" class="unnamed1">
<tr>
<td >how are you!</td>
</tr>
</table></td>
</tr>
</table>
[/html] |
| 好象是视觉差，字体好象没有渐变呀 |
看了孤狼有几个问题要问一下
1.以下这两种写法有何区别,两个不都是达到渐变效果吗,疑惑什么时候该用哪一个:
filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=100);
filter : progid:DXImageTransform.Microsoft.Gradient(enabled=true,startColorStr=#ffffffff,endColorStr=#ff006699);
=================
这个问题有些明白了, Alpha主要是用于调整对象内容的透明度,
Gradient在对象的背景和内容之间显示定制的色彩层,即可以用多种色作渐变
2.为什么写成下面这样
filter : Gradient(enabled=true,startColorStr=#ffffffff,endColorStr=#ff006699);
样式就显示不出来了呢,跟Gradient跟Alpha不一样吗
3.怎么把渐变应用到按钮上,嘿嘿~~
试了一下没起作用
嘿嘿,刚下了一个样式表滤镜中文手册,有些问题看不明白 |
没人理我,又解决了按钮的问题,修正一下
==========================
<form action="" method="get">
<div>
<input type="submit" name="Submit" value="另一种方法" style="filter : progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorStr=#ffff9900,endColorStr=#FFffff00,GradientType='0'); border:#666 1px solid;" />
</div></form>
=====================
重点是加了一句background:#FFF;或是border:#666 1px solid;
就能解决渐变不起作用
注意这里的background:#FFF;色是不起作用的;
不多作解释了,看懂了下面这个就行
startColorStr=#ffff9900;
其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。
AA 指定透明度。 00 是完全透明。 FF 是完全不透明。
当然如果你把AA设为 00,那么startColorStr显示的为是你的背景色,而不是你设定的色了:D
嘿嘿,修正了几遍,总算明白了
就是加了border:#666 1px solid也能解决渐变不起作用是哪门子原理我就不明白了
|
| 又学到了一点CSS的知识，谢楼上的 |
|
