2

私がやろうとしていることは次のとおりです。ページの中央から始まり、上部で終わる半日食（つまり、半日食）の光のある灰色の無地の背景。トーチが上向きに輝いているように見えます。ページの中央から。

簡単かもしれないと思ったので、cssの代わりにSVGを使用してみましたが、いくつかの問題が発生しました。誰かが私を正しい方向に向けることができますか？

編集：これが私が達成しようとしていることのイメージです： ここに画像の説明を入力してください

4

3 に答える 3

4

radial-gradient次のように、を背景画像として使用できます。

html {
    background: #ccc;
    background: -moz-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
    background: -webkit-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
    background: -ms-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
    background: -o-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
    background: radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
    min-height: 100%;
}

これは、グラデーションの中心をページの50％上に配置し（2番目のパラメーターに注意してください）、カバー属性-50%と組み合わせて機能します。size

CSSのradial-gradientプロパティの詳細については、MDNを参照してください。

次に例を示します。http：//jsfiddle.net/kUFNV/4/

于 2012-07-02T03:54:12.230 に答える
1

CSSグラデーションを使用してみませんか？ここ：

background: #f9f9f9;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmOWY5ZjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjY2RjZGNkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #f9f9f9 0%, #cdcdcd 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f9f9f9), color-stop(100%,#cdcdcd));
background: -webkit-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: -o-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: -ms-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: radial-gradient(ellipse at center, #f9f9f9 0%,#cdcdcd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#cdcdcd',GradientType=1 );

margin-top: -50%;次に、背景のある要素にCSSを追加します。少し面倒になるので、これがbody要素であることはお勧めしませんが、絶対位置を使用して新しい要素を作成し、グラデーションコードと-50％のマージンをz-index: -1;指定して、残りのすべての下に配置します。ページ。

幸運を！

于 2012-07-02T03:53:58.660 に答える
1

このようなCSS3グラデーションジェネレーターの1つで遊んでみることをお勧めします。放射状のグラデーションでいくつかの異なるカラーストップを使用すると、かなり近い何かを達成できるはずです。

これが私がすぐにまとめたものです：http：//jsfiddle.net/43k6F/

于 2012-07-02T03:58:46.100 に答える