3

ページにビネットのような背景を付けようとしています。

html {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat:no-repeat;
    background: -webkit-radial-gradient(rgba(249, 249, 249,1),rgba(249, 249, 249,0)); /* Safari 5.1 to 6.0 */
    background: -o-radial-gradient(rgba(249, 249, 249,1),rgba(249, 249, 249,0)); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(rgba(249, 249, 249,1),rgba(249, 249, 249,0)); /* For Firefox 3.6 to 15 */
    background: radial-gradient(rgba(249, 249, 249,1),rgba(249, 249, 249,.66),rgba(249, 249, 249,0)); /* Standard syntax (must be last) */
    background-color: #bbbbbb;
    background-attachment: fixed;
}

バンディングを少し減らすため、rgba を使用しています。

ここに画像の説明を入力

しかし、基本的には、左側の画像が必要なときに、右側の (誇張された) 画像を取得しています。赤は可視画面を表します。

これどうやってするの？

4

3 に答える 3

2

すべてのグラデーション呼び出しで、もう 1 つの引数 "circle" が必要だったことがわかりました。例えば：

-webkit-radial-gradient(circle, rgba(249, 249, 249,1),rgba(249, 249, 249,0)); /* Safari 5.1 to 6.0 */

元のコードとこれを最後に：

background-position: center;

私が説明していたことを正確に行います。

于 2015-11-24T11:10:33.893 に答える
2

SVG 画像を背景として使用できます。画像を使用すると、ブラウザーは背景の縦横比を知ることができます。グラデーションには既知のアスペクト比がありません。

ここでは、SVG を CSS にインラインで配置しました。

これでうまくいくはずです：

フィドル: http://jsfiddle.net/tca8zzth/1/

CSS

html {        
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;        
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"><radialGradient id="SVGID_1_" cx="250" cy="250" r="250" gradientUnits="userSpaceOnUse"><stop  offset="0" style="stop-color:#F9F9F9"/><stop  offset="1" style="stop-color:#F9F9F9;stop-opacity:0"/></radialGradient><rect fill="url(#SVGID_1_)" width="500" height="500"/></svg>');
    background-color: #bbbbbb;
    background-attachment: fixed;
    background-position: 50% 50%;
}

アップデート

これを Firefox で機能させるに#は、data-uri 値のハッシュ ( ) を としてエンコードする必要があります%23。

更新されたフィドル: http://jsfiddle.net/tca8zzth/2/

更新された CSS

background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" x="0px" y="0px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"><radialGradient id="SVGID_1_" cx="250" cy="250" r="250" gradientUnits="userSpaceOnUse"><stop  offset="0" style="stop-color:%23F9F9F9"/><stop  offset="1" style="stop-color:%23F9F9F9;stop-opacity:0"/></radialGradient><rect fill="url(%23SVGID_1_)" width="500" height="500"/></svg>');
于 2015-11-24T10:55:30.653 に答える
0 
html {
    background-repeat:no-repeat;
    background: -webkit-radial-gradient(rgba(249, 249, 249,1),rgba(249, 249, 249,0)); /* Safari 5.1 to 6.0 */
    background: -o-radial-gradient(rgba(249, 249, 249,1),rgba(249, 249, 249,0)); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(rgba(249, 249, 249,1),rgba(249, 249, 249,0)); /* For Firefox 3.6 to 15 */
    background: radial-gradient(rgba(249, 249, 249,1),rgba(249, 249, 249,.66),rgba(249, 249, 249,0)); /* Standard syntax (must be last) */
    background-color: #bbbbbb;
    background-attachment: fixed;
    background-size: 100% 200%;
    background-position: center;
}

"背景サイズ: カバー;" 引き伸ばすには、高さを 2 倍に増やし、背景を中央に再配置します。

于 2015-11-24T10:15:39.620 に答える