求一效果。解决方案

WBOY
發布: 2016-06-13 10:18:37
原創
880 人瀏覽過

求一效果。
CSS3 opacity 是透明属性,

怎样让一个DIV左右两边慢慢透明掉,中间不透明?

相对来说opacity的值就是这样子,不可能要我分成N个DIV设置不同的opacity 值了

0.1 0.3 0.5 0.7 0.9 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0.9 0.7 0.5 0.3 0.1

坛里谁做过这样的效果啊。。也就是说要渐变透明。

------解决方案--------------------
http://www.zhangxinxu.com/wordpress/2010/04/css%E5%AE%9E%E7%8E%B0%E5%85%BC%E5%AE%B9%E6%80%A7%E7%9A%84%E6%B8%90%E5%8F%98%E8%83%8C%E6%99%AFgradient%E6%95%88%E6%9E%9C/
变通一下应该就可以了
------解决方案--------------------
alpha属性

  alpha是来设置透明度的。先来看一下它的表达格式:

  filter:alpha(opacity=opcity,finishopacity=finishopacity,style=style,startX=startX,tartY=startY,finishX=finishX,finishY=finishY)

  哇,怎么这么长。是啊,不过这些参数都各有其用。
  Opacity代表透明度等级,可选值从0到100,0代表完全透明,100代表完全不透明。 Style参数指定了透明区域的形状特征。其中0代表统一形状;1代表线形;2代表放射状;3代表长方形。
  Finishopacity是一个可选项,用来设置结束时的透明度,从而达到一种渐变效果,它的值也是从0到100。 StartX和StartY代表渐变透明效果的开始坐标,finishX和finishY代表渐变透明效果的结束坐标。 
  从上面讲的我们可以看出,如果不设置透明渐变效果,那么只需设置opacity这一个参数就可以了。说了这么多,我们来看一个实例吧(见下图):
------解决方案--------------------
把div分两半。哈哈
------解决方案--------------------
设置三个div,让两边的div渐变,中间的div保持不变。下面是一个div渐变:

HTML code
 <title>CSS渐变色</title><style type="text/css">.test {width:560px;height:400px;background-color:#FFFFFF;padding:10px 8px 6px;border: 1px solid #000;margin-bottom:10px;FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8);/*IE6*/background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*非IE6的其它*/background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#b8c4cb), to(#f6f6f8));/*非IE6的其它*/}</style><div class="test">用CSS生成的渐变色。源码来自:烈火下载 http://www.veryhuo.com/down</div><br><center>如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href="http://www.veryhuo.com/" target="_blank">http://www.veryhuo.com/</a>
</center><br><font color="#e78608">------解决方案--------------------</font><br>应该可以通过gadient做这种效果吧,ie不会。。<br>http://jsbin.com/amujel/edit#html,live<br><font color="#e78608">------解决方案--------------------</font><br>
登入後複製
探讨

又是这样子。
怎么都是这样的啊,这个跟楼上那些都是一样的,都是背景颜色渐变而已啊。

是要透明渐变,左右两端透明到看不到东西。不是只是背景变色。


引用:

应该可以通过gadient做这种效果吧,ie不会。。
http://jsbin.com/amujel/edit#html,live

------解决方案--------------------
简单做,让美工出个带着透明渐变的PNG遮罩。
------解决方案--------------------
HTML code
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>Js娣″</title>
登入後複製
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板