2

私はここでの回答の1つからの指示を休み、ボディタグで機能するようにインセットボックスシャドウを取得しました。

ライブの例は次のとおりです：http：//nemokamamuzika.lt

これは私が休んだコードです：

html, body { 
    width:100%;
    height: 100%;
}

body {
    box-shadow: inset 0 0 1000px 30px black;
    background: url('http://osxdaily.com/wp-content/uploads/2011/08/apple-shirt.jpg');
}

しかし....「愛されている」ブラウザInternetExplorer9では機能しません...

Finnalyは自分でworkaraoundを手に入れました。誰かが解決策を必要とする場合：

これはhtmlです：

<body>
<div id="shadow">
<div id="padding">
<div id="content">
</div></div></div></body>

これはCSSです：

html { 
    height: 100%;
}

body {
  height:100%;
  min-height: 100%;
  background-image: url('/wp-content/uploads/someimage.jpg');
  background-attachment: scroll;
  background-repeat: repeat;
}

#shadow {
  width: 100%;
  min-height: 100%;
  margin: 0 auto;
  box-shadow: inset 0 0 400px 50px black;
}

#padding{
  width: 100%;
  min-height: 100%;
  margin: 0 auto;
  padding: 30px 0 30px 0;
}
4

1 に答える 1

2

トリックは、背景画像を html タグに入れることです。

この css3 サンプルは、色あせた背景ドロップダウン効果を提供します。それ以外の場合は、css3 ブラウザーでも 24 ビットの png 画像を使用して作成されることがよくありますが、こちらの方が簡単です。IE9、Firefox、Safari (Windows 用) の Testet。

ここでテストしてみてください: http://jsfiddle.net/LUDJF/

html {
        width:100%;
        height:100%;
        background:url('http://www.sequelsite.dk/mediafiles/sequelsite/white-grid-paper-background-pattern.jpg');
}

body {
        margin:0;
        padding:0;
        width:100%;
        height:100%;
        box-shadow  : inset 0px 3000px 200px -2800px rgba(255,0,0,0.5);
        -webkit-box-shadow: inset 0px 3000px 3000px -2800px rgba(255,0,0,0.5);
        -moz-box-shadow : inset 0px 3000px 200px -2800px rgba(255,0,0,0.5);
        -o-box-shadow   : inset 0px 3000px 200px -2800px rgba(255,0,0,0.5);
}
于 2013-04-08T20:46:24.167 に答える