Question

CSS

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

HTML

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

不添加任何标记或HTML。

没有Javascript。

lego是100％宽，而图像不是。

如何仅将box-shadow（或其他样式）专门应用于图像（而不是100％宽的乐高元素）。

Answer 1

没有。为实际图像添加阴影。

编辑： CSS3允许多个背景，所以也许你可能会变得棘手。

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

Answer 2

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

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

这不可能。

Answer 3

你做不到。 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>

Answer 4

你可以使用css pseudo :before or :after elements来包含你的图像，这样你就可以给:before元素一个阴影而不是lego 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;
}

Answer 5

我认为这是不可能的。 CSS只能设置HTML元素的样式，而背景图像不是元素。但你可以为图像本身添加一个阴影（使用photoshop或类似的东西），或者你可以尝试使用#logo:after并使用它，也许它可以做你想要的。

是否有将风格应用于背景图像的技巧？

5 个答案: