効果を求めてください。解決-PHPチュートリアル-php.cn

効果を求めてください。解決

WBOY

リリース： 2016-06-13 13:34:39

オリジナル

887 人が閲覧しました

求一效果。
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


 <html>
<head>
<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>
</head>
<body>
<div class="test">
用CSS生成的渐变色。源码来自：烈火下载 http://www.veryhuo.com/down
</div>
</ボディ>
</html><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 を通じて実現できるはずです。つまり、そうではありません。 。 <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 コード


<!DOCTYPE html>
<html>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Js フェード</title>

* {font-size:12px;}
html { マージン:0px; オーバーフロー:0px;
ボディ { マージン: 0px; 背景色: ボタン面;
#w { 位置: 絶対; 幅: 270 ピクセル; 境界: 280 ピクセル; フィルター: アルファ (不透明度 = 100);
#t {行の高さ:20px;幅:480px;背景の色:白;テキストの配置:中心; }
</スタイル>
</head>

<div id="w">
    <div id="t">デモ Windows フェード ウィンドウ</div>
</div>
</ボディ>
<スクリプト>
(関数(o,i,s){
    i=1;s=0.01;
    setInterval(関数(){
        i+=s; s=i1?-0.01:s);
        if(o.filters)o.filters[0].opacity=i*100;
        それ以外の場合は o.style.opacity=i;
    },1);
})(document.getElementById("w"));
</スクリプト>
</html>
 <div class="clear"></div>

ログイン後にコピー