0

CSS

#lego{
    background: url(images/lego.png) no-repeat center bottom ;
}

HTML

<div id="lego"></div>

タグや HTML を追加せずに。

Javascriptなし。

レゴは 100% 幅ですが、画像はそうではありません。

box-shadow画像のみ (100% 幅のレゴ要素ではなく) に具体的に (または他のスタイルを) 適用する方法。

4

5 に答える 5

5

いいえ。実際の画像に影を追加します。

編集: ただし、CSS3 では複数の背景が許可されているため、扱いにくい場合があります。

http://www.css3.info/preview/multiple-backgrounds/

于 2012-09-13T06:50:56.690 に答える
1

できません。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>
于 2012-09-13T06:54:37.390 に答える
1

要素の背景画像である画像をスタイルする方法はありません。背景画像は要素のスタイリングの一部です。

タグを使用して<img>(position と box-shadow を使用)、これを行うか、Photoshop または別の画像編集プログラムで画像自体に影を追加できます。

これはできません。

于 2012-09-13T06:53:30.430 に答える
1

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;
}
于 2012-09-13T06:58:21.977 に答える
1

それは不可能だと思います。CSS は HTML 要素のみをスタイル設定でき、背景画像は要素ではありません。ただし、画像自体に影を追加することも (photoshop または sth を使用して)、それを使用#logo:afterして再生することもできます。おそらく、意図したとおりに動作する可能性があります。

于 2012-09-13T06:59:12.733 に答える