CSS
#lego{
background: url(images/lego.png) no-repeat center bottom ;
}
HTML
<div id="lego"></div>
タグや HTML を追加せずに。
Javascriptなし。
レゴは 100% 幅ですが、画像はそうではありません。
box-shadow
画像のみ (100% 幅のレゴ要素ではなく) に具体的に (または他のスタイルを) 適用する方法。
いいえ。実際の画像に影を追加します。
編集: ただし、CSS3 では複数の背景が許可されているため、扱いにくい場合があります。
できません。CSS スタイルは DOM 要素に適用されます。背景画像は DOM 要素ではありません。次のようなことができます。
CSS:
#lego .image {
background: url(images/lego.png) no-repeat center bottom ;
width: <image_width>;
height: <image_height>;
box-shadow: ...
...
}
HTML:
<div id="lego">
<div class="image"></div>
</div>
要素の背景画像である画像をスタイルする方法はありません。背景画像は要素のスタイリングの一部です。
タグを使用して<img>
(position と box-shadow を使用)、これを行うか、Photoshop または別の画像編集プログラムで画像自体に影を追加できます。
これはできません。
css疑似 :before または :after 要素:before
を使用して画像を含めることができるため、レゴ div ではなく要素に影を付けることができます。このフィドルをチェックしてください - http://jsfiddle.net/cNeWW/
#lego{
width: 100%;
position: relative;
}
#lego:before{
content: "";
background: url(images/lego.png) no-repeat center bottom;
position: absolute;
width: <background width>;
height: <background height>;
display: block;
box-shadow: 5px 5px 3px #000;
}
それは不可能だと思います。CSS は HTML 要素のみをスタイル設定でき、背景画像は要素ではありません。ただし、画像自体に影を追加することも (photoshop または sth を使用して)、それを使用#logo:after
して再生することもできます。おそらく、意図したとおりに動作する可能性があります。