通过css在div下面添加图片？

Question

我计划在div下面添加一张图片。它将在导航栏（div）下方，添加一些漂亮的阴影效果（img）。看起来像这样：

<div>...</div>
<img>

到目前为止它只是在html代码中，但我想保留html代码，因为它是一个经常更新的主题。所以我想只改变CSS。

有没有办法在不改变HTML代码的情况下做到这一点，只使用CSS？

Answer 1

你不能通过css改变图像元素的来源...... 你可以使用CSS tho创建阴影：

    -webkit-box-shadow: 0 8px 6px -6px black;
   -moz-box-shadow: 0 8px 6px -6px black;
        box-shadow: 0 8px 6px -6px black;

或者您可以通过javascript或代码隐藏

来更改图像

javascript：$(element).src = "path to new image";

Answer 2

两个建议：

1. 将阴影图像作为1px x Xpx重复背景图像添加到导航DIV的底部。因此它将位于导航DIV内。只需在NAV DIV的底部添加一些填充物即可容纳它，例如

nav {     填充底：6像素;     background：url（images / nav-bg.png）repeat-x 0 bottom; }

（上面的代码假定你的背景图像高度为6像素，宽度可能是1像素（但这取决于你），显然必须将路径调整到实际图像的位置。

1. 不是在NAV DIV下添加IMAGE，而是添加另一个DIV，再次通过CSS将1px x Xpx阴影图像添加到该DIV。