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

无法设置作为元素背景图像的图像的样式。背景图像是元素样式的一部分。

您可以使用<img>标签（使用位置和框阴影）来执行此操作，或者在 Photoshop 或其他图像编辑程序中为图像本身添加阴影。

这是无法做到的。

于 2012-09-13T06:53:30.430 回答
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

您可以使用 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 或类似的东西），或者您可以尝试使用#logo:after和使用它，也许它可以达到您的预期。

于 2012-09-13T06:59:12.733 回答