0

我打算在 div 下方添加一张图片。它会在导航栏 (div) 下方，添加一些漂亮的阴影效果 (img)。看起来像这样：

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

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

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

4

2 回答 2

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 或从 codehind 更改图像

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

于 2012-12-20T11:54:24.443 回答
1

两个建议：

  1. 将阴影图像作为 1px x Xpx 重复背景图像添加到导航 DIV 的底部。所以它将位于导航 DIV 中。只需在 NAV DIV 的底部添加一些填充以适应它，例如

导航 { padding-bottom:6px; 背景：url（images/nav-bg.png）重复-x 0底部；}

（上面的代码假定您有一个高度为 6 像素、宽度可能为 1 像素的背景图像（但这取决于您），并且显然必须将路径调整为您的实际图像所在的位置。

  1. 不要在 NAV DIV 下添加 IMAGE，而是添加另一个 DIV，然后再次通过 CSS 向该 DIV 添加 1px x Xpx 阴影图像。
于 2012-12-20T12:21:29.433 回答