1

この要素を使用box-shadowしてhtml、Webサイトの背景に明るいビネット効果を与えます。ただし、サイトのコンテンツがウィンドウよりも長い場合はbox-shadow、サイトの最初に表示できる部分にのみ表示されます。下にスクロールすると、box-shadow動作を停止します。

これが私のCSSコードです：

html {
    box-shadow: 0 0 200px rgba(0,0,0,0.9) inset;
    height: 100%;
}

body {
    font-family: "Source Sans Pro", sans-serif;    
    margin: 0;
    background: url('../img/subtle_grunge.png');
}

要素にを適用しようとしましたbox-shadowがbody、それも機能しません。驚いたことに、body作品の背景画像セットは問題ありません。この問題はすべてのブラウザ（Safari 6、Firefox 18、Chrome 24 –すべてMac）で発生します。解決策はありますか？

次に例を示します。http：//dreamapp.de/sites/portfolio/boxshadowproblem.html

ここに画像の説明を入力してください

4

2 に答える 2

4

<div>タグの後に右を置き、<body>そこに CSS プロパティを移動できます。そのような：

HTML

<body>
  <div class="vignette"></div>
  <!-- rest of your code -->

CSS

.vignette {
  position: fixed;
  /* to prevent empty space around the vignette */
  top: 0;
  left: 0;
  /* extends to the whole visible area */
  width: 100%;
  height: 100%;
  box-shadow: 0 0 200px rgba(0,0,0,0.9) inset;
}

このようにして、要素は他のすべての要素の下に留まり、コンテンツをスクロールできます。

于 2013-01-30T02:06:30.567 に答える
1

「height: 100%;」を削除します。あなたのhtmlタグからスタイル。または、「min-height: 100%;」に変更することもできます。

于 2013-01-30T02:05:53.850 に答える