8

Web サイトのビネット効果を作成する方法について、良い解決策を探しています。角は、放射状グラデーションのようにページの背景色よりも暗くする必要があります。

これまでのところ、さまざまなアプローチを試しました。

  • position:absolute、top/bottom:0px、left/right:0px に設定された 4 つの DIV と、それぞれに 1 つの画像があります (画像はリンクをブロックします。一般的に悪い考えですか?)
  • 上記と同じですが、div の高さ/幅が固定され、画像の代わりに背景画像が使用されます (まだリンクをブロックしていますか?!)
  • CSS3 複数の背景。本体の左上/右に 2 つ、下部に余分な div が 1 つ、height:300;margin-top:-300px で常に下部に表示されます (ブラウザのサポートが悪い)。
  • 本体の CSS3 放射状グラデーション (スクロールするとすぐに背景が失われます。追加の div でこれを修正できます。また、ブラウザのサポートも悪いです)

ブラウザのサポートについて: このソリューションは最新バージョンの firefox、chrome、IE、および可能であれば Opera と safari (重要度順) で動作する必要があります。それは絶対的な最小値です。ただし、古いブラウザでも実際に動作するはずです。Firefox 3.6 および IE 8 または可能であれば 7。chromesのバージョン履歴はよくわかりませんが、chromeユーザーはほぼ最新のようですので、chrome15以下のサポートを打ち切っても大した問題ではないでしょうか?! クロム17で何かを機能させる重要な変更さえありますが、たとえば15では機能しませんか?

私の意見では、CSS3 の放射状グラデーションは最も見栄えの良いソリューションですが、古いブラウザーを使用しているために、多くのユーザーがそれをサポートしていないのではないかと心配しています。また、4 DIV ソリューションでは、画像がリンクをブロックしているため、リンクをクリックできないという問題があります。z-indexをいじってみましたが、うまくいきません。DIV に z-index:1 を指定し、#container (すべてのコンテンツが配置される場所) に 10 の z-index を指定しました。z-index はリンクにも影響しますか?

それで、あなたはどう思いますか、良い解決策になるでしょうか？ここでは明らかに助けが必要です。ありがとう！

4

4 に答える 4

11

内側のボックスシャドウを使用できます

 box-shadow: inset 0 0 100px #000;

デモ: http://jsfiddle.net/ACPUP/

ただし、IE7/8 では動作しません。古いバージョンの Firefox、Chrome、Safari、または Opera では、プレフィックスが必要になる場合があります: -webkit-box-shadow、-moz-box-shadow、または -o-box-shadow。

これらの影を積み重ねて、より劇的な効果を出すこともできますが、古いバージョンのブラウザーがそれをサポートしているかどうかはわかりません.

box-shadow: inset 0 0 120px #000, inset 0 0 80px #000, inset 0 0 40px #000;
于 2012-03-08T07:54:00.177 に答える
1

必要なものによっては、このようなものが機能する場合があります。

<style>

height: 100%;
width: 100%;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */

background:  url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MyUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSI5OSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC42NSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNjUiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 63%, rgba(0,0,0,0.65) 99%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */

background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(63%,rgba(0,0,0,0)), color-stop(99%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */

background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */

background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* Opera 12+ */

background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* IE10+ */

background: radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */


}
</style>

私のブラウザで動作します。すべてのブラウザで動作するはずです。乱雑ですが、これをHTMLに設定すると、たとえば、必要な色や画像で本文を作成できます。

ここで実際にそれを見てください。http://jsfiddle.net/joshuamartin/taN2Z/4/

http://www.colorzilla.com/gradient-editor/

于 2012-03-07T14:51:50.627 に答える
1

以前にこのブログで説明したこの手法を使用しましたが、非常にうまく機能します。ただし、古いブラウザのサポートについてはわかりません。

于 2012-03-07T14:45:19.167 に答える