HTML/CSS：ビネットエフェクトを作成するには？ 4イメージ？ CSS3グラデーション？

Question

私はウェブサイトのためにvignette effectを作る方法の良い解決策を探しています。コーナーは、ラジアルグラデーションのように、ページの背景色よりも暗くする必要があります。

は、これまでのところ、私は別のアプローチを試してみました：位置に設定

• 4 div要素：絶対、トップ/ボトム：0PX、左/右：それらの各1枚の画像と0PX（画像はリンクをブロック悪い考え。
• 画像の代わりにdivと背景画像の高さと高さが固定されています（まだリンクをブロックしていますか？）
• CSS3複数の背景。左上/右の2つのボディと、下の余分なdivと300の高さ：margin-top：-300pxを常に下に表示する（悪いブラウザサポート）
• CSS3の放射状グラデーション。。あなたが背景を失うスクロールすると、余分なdivが再びまた悪いブラウザのサポートをこの問題を解決する可能性が）ブラウザのサポートについて

：Firefoxの最新バージョンで解決必須仕事、クロム、IE とIF可能なオペラとサファリ（重要度順）。それは絶対最小です。しかしそれは古いブラウザでも実際に動作するはずです。 Firefox 3.6とIE 8、または可能であれば7まで。クロームのバージョン履歴はよく分かりませんが、クロムユーザーはほとんどすべて最新のようですので、クローム15以下のサポートを中止するのは大きな問題ではありませんか？クロム17で何かをする重要な変更はありますか？たとえば15ではなくなりますか？

私の意見では、CSS3の放射状グラデーションは最高の見た目のソリューションですが、古いブラウザーのために、多くのユーザーがサポートしていないのではないかと心配しています。そして4DIVソリューションでは、画像をブロックするため、クリックできないリンクに問題があります。私はz-indexを使いこなそうとしましたが、うまくいきません。私はDIVのz-index：1と#container（すべてのコンテンツが配置されている場所）にZ-index 10を与えました。 z-indexはリンクに影響を及ぼしますか？

だから、皆さんはどう思いますか、良い解決策になるでしょうか？私は明らかにここでいくつかの助けが必要です。ありがとう！

Answer 1

私はthis blogで説明したこの手法を使用しました。これは実際にはうまく機能します。しかし、古いブラウザのサポートについてはわかりません。

Answer 2

あなたが望むものによっては、このようなものが機能するかもしれません。

<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/

Answer 3

あなたは

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; 

Answer 4

CSSの使用！ウィレムの答えに

わずかな変動は、JohnKによって推奨されているように帽子はChris Coyierをひっくり返した人：

box-shadow: inset 0 0 85px rgba(0, 0, 0, 0.4); 

JSFiddleを：http://jsfiddle.net/charlesgoodwin/wKQ2y/

それは非常にうまく機能します！