6

私はテキストを画像に置き換えるCSSテクニックに精通しています。たとえば、そのうちの9つは次のとおりです。http：//css-tricks.com/nine-techniques-for-css-image-replacement/

画像を置き換えるためのテクニックはありますか？とにかく、画像の背景を画像に設定してから、画像の前景（画像のsrc要素）を非表示または移動する方法はありますか？

置き換えたい画像のあるサイトのスキンを作成しようとしています。ありがとう。

私の理解では、彼はHTMLやJavaScriptを変更せずに、純粋なCSSでこれを実行しようとしています。

それは正しいです。既存のページに新しいスタイルシートを追加しています。HTMLを変更したり、JavaScriptを利用したりできないとしましょう。

4

5 に答える 5

6

ちょっといじってたら、わかった！

img.someclass {
  background: url("NEW IMAGE URL") top right;
  height: 0;
  width: 0;
  padding: 200px 550px 0 0; /* Insert actual image size (height width 0 0) */
}

これにより、実際の画像の高さと幅が 0 になりますが、ボックスが拡張されて画像のサイズがパディングで埋められます。これの唯一の欠点は、古いバージョンの Internet Explorer では完全に表示されないことです。

于 2009-07-03T20:04:53.077 に答える
2

DIV などの画像を囲む要素がある場合は、その上に背景画像を (繰り返しなしと位置とともに) 設定し、画像を に設定できるはずですdisplay:none。

別の方法として、うまくいくと思われる偶然の解決策を次に示します。画像を画面外に配置し、:after疑似要素を使用して背景画像を設定します。動作するはずですが、正しく動作させるには値をいじる必要があります。ただし、IE6 では動作しません。

<style>
  img.test {
    background: url('image_to_show.png') no-repeat right top;
    position: relative;
    left: -16000px;
  }
  img.test:after {
    content: ".";
    color: transparent;
    display: block;
    width: 16000px;
  }
</style>

<img class="test" src="image_to_hide.png">
于 2009-07-03T20:25:23.013 に答える
0

画像を置き換える最良の方法は、背景の位置を設定することです。最初に2つの異なる画像を作成し、同じ画像に上下に配置します。肌の要素が50x50ピクセルだとすると、50x100の画像が作成されます。

次に、次のようなコードを使用します。

.skinElement1 {
  background: #fff url("image.png") no-repeat 0 0;
}
.skinElement2 {
  background: #fff url("image.png") no-repeat 0 -50px;
}

したがって、2番目の画像を表示するには、背景を必要な量だけ上に移動します。javascriptまたはサーバー側のコードを使用して、適切なクラスを設定できます。

于 2009-07-03T19:32:25.487 に答える
-1

たぶん、要素の不透明度を設定してから、必要な画像に背景を設定することができます。

Musicfreak：私は2つの要素を使用することを意味しました。

于 2009-07-03T19:28:38.877 に答える
-2

2つの状態に異なるクラスを割り当ててから、イベント時に画像を変更するJavaScriptを記述します。

例えば：

.firsImage { background:transparent url(/images/someImage.jpg) no-repeat; }
.secondIMage { background:transparent url(/images/image2.jpg) no-repeat; }

HTML：

<div id="imageDiv" class="firstImage"> some content </div>
<a onclick="changeImage()">Change the image!</a>

Javascript：

function changeImage(){
    var imageDiv =  document.getElementById("imageDiv")

    if ( imageDiv.className === "firsImage" )
        document.getElementById("imageDiv").className = "secondImage"
    else
        document.getElementById("imageDiv").className = "firstImage"
}
于 2009-07-03T19:31:26.657 に答える