3

所定の位置 (x 軸のピクセル単位) から開始するプログラムによる水平グラデーションを作成するにはどうすればよいですか?

ここに問題があります-私は画像を次のbackground-imageように設定しました-理想的には、画像の端の近く（〜1800ピクセル）から始まり、完全な黒に優雅にフェードするCSSグラデーションを宣言します。

これまでのところ、私が持っている最善の解決策は、2 つの div 要素を用意するbackground-positionことです。

これは機能しますが、1px の画像のトリックから逃れたいと思っています。何か案は？

<div id="photobg">
 <div id="gradientbg">
 </div>
</div>

#photobg {
 background-image:url('photourl.jpg');
}

#gradientbg {
 background-image:url('1pxgradient.jpg');
 background-repeat: repeat-y;
 background-position: 1780px 0;
 height: 100%;
}

私がやりたいのは、理論的には、CSS グラデーションに 1780 px のカラー ストップを使用することですが、私が理解しているように、CSS はカラー ストップとして % 値のみをサポートしています。

参考： CSS 3 下から n ピクセルのグラデーション - Webkit/Safari

4

2 に答える 2

0

CSS のこのブロックは、あなたが望むことを行います

background: -moz-linear-gradient(center top , #00AFF0, #53D4FE); //this is for mozilla
background-image: -webkit-linear-gradient(top, #00AFF0, #53D4FE); //this is for chrome and safari
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00AFF0', endColorstr='#53D4FE', GradientType=0); //this is for IE

グラデーションは色 #00AFF0 から #53D4FE (上から下) です。

于 2012-08-17T22:09:31.807 に答える