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またはコードハインドから画像を変更できます

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

于 2012-12-20T11:54:24.443 に答える
1

2 つの提案:

  1. 影の画像を 1px x Xpx の繰り返し背景画像として nav DIV の下部に追加します。したがって、nav DIV 内に配置されます。NAV DIV の下部にパディングを追加するだけで対応できます。

nav { padding-bottom:6px; background:url(images/nav-bg.png) repeat-x 0 bottom; }

(上記のコードは、高さが 6 ピクセル、幅がおそらく 1 ピクセルの背景画像があることを前提としていますが (ただし、それはあなた次第です)、実際の画像が配置されている場所になるようにパスを調整する必要があることは明らかです。

  1. NAV DIV の下に IMAGE を追加する代わりに、別の DIV を追加し、もう一度 CSS を介してその DIV に 1px x Xpx の影の画像を追加します。
于 2012-12-20T12:21:29.433 に答える