8

私が探している最終結果は次のようなものです。

http://osxdaily.com/wp-content/uploads/2011/08/icloud-background.jpg

この bkg タイトルで生成されたもの:

http://osxdaily.com/wp-content/uploads/2011/08/apple-shirt.jpg

目的の出力を得るために css3 box-shadow を適用することは可能ですか?

私は試した：

box-shadow: inset 0 0 490px black;

しかし、それは画面のほんの一部しかカバーしていません。

ありがとう

4

7 に答える 7

12

ボックスの影を設定する要素の幅と高さが 100% であることを確認してください。これは、すべての先祖も 100% の高さと幅を持つ必要があることを意味します。したがって、 に適用する場合はbody、 にhtmlもこれらのプロパティが必要です。

CSS:

html, body { 
    width:100%;
    height: 100%;
}
​
body {
    box-shadow: inset 0 0 490px black;
    background: url('image.jpg');
}

JS フィドルの例

スクロールしても同じ影効果を維持するには、ボックスの影をwrapperdiv に適用してから を適用しますoverflow:auto。

HTML:

<html>
<body>
    <div id="wrapper"></div>
</body>
</html>

CSS:

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

#wrapper {
    box-shadow: inset 0 0 490px black;
    background: url('image.jpg');
    overflow: auto;
}

<a href="http://jsfiddle.net/YDYTd/3/">JS Fiddle の例

于 2012-08-03T19:07:26.067 に答える
2

同様の効果を得る別の非常に簡単な方法があります。boxshadow を持つ div で Web サイトのコンテンツをラップする必要があります。また、div は 100% の幅と高さ、および posiation: absolute; を持つ必要があります。これにより、ページをスクロールしたときに素敵なエヴァン効果が得られます。

HTML

<div class="shadow">

    <!-- ANY CONTENT GOES HERE -->
    <div>
        <h1>Content</h1>
    </div>
    <!-- ANY CONTENT GOES HERE -->

</div>

CSS

.shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: inset 0px 0px 400px #000000;
    box-shadow: inset 0px 0px 400px #000000;
}

例: http://jsfiddle.net/2GRGF/1/

于 2014-01-29T11:06:10.110 に答える
2

私が正しく理解していれば、これはあなたが探しているものです: http://jsfiddle.net/RGWrC/

コードは次のとおりです。

html { 
    height: 100%;
}

body {
    min-height: 100%; 
    box-shadow: inset 0 0 490px black;
    background: url('whatever.jpg');
}

これにより、背景がページの高さいっぱいまで拡張されますが、ウィンドウの高さと同じ最小値が保証されます。CSSは自明だと思います。

于 2012-08-04T00:20:39.313 に答える
1

画像をページの背景として設定し、約 100 ～ 200 ピクセルのマージンを持つコンテナーを定義し (影の方法によって異なります)、このマージンをその div のボックス シャドウで埋めます。div を固定位置に設定することもできます (私は信じています)。これにより、ページと共にスクロールし、同じシャドウ効果を維持できます。

編集：画像をページ（htmlまたは本文）の背景として設定すると、画像が小さすぎるという問題が修正されます.divは必要な影の効果を作成します

于 2012-08-03T19:13:10.727 に答える
0

画像タイルをコンテナの背景として設定し、画面全体にコンテナを配置しましたか？次に、あなたが提案するcssが機能するはずだと思います。おそらくフィドルを試してみてください...

于 2012-08-03T19:07:57.493 に答える
0

影は何に付けましたか？本体、またはサイズが 100% の要素に影を挿入する必要があります。

リンク内の画像には、背景の四角形が繰り返され、次に影が挿入されています。おそらく、画面全体にまたがる同じ要素上にあります。

于 2012-08-03T19:06:13.323 に答える