html - 是否有技巧将样式应用于背景图像？

的CSS

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

的HTML

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

无需添加任何标签或HTML。

没有Javascript。

乐高是100％宽，而图像不是。

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

最佳答案

您可以使用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;
}