•  22-08-2019
  •  | 
  •  

質問

私は、画像とテキストを置き換えるために、CSSの技術に精通しています。例えば、ここではそれらの9です：ます。http：// css- tricks.com/nine-techniques-for-css-image-replacement/する

画像を交換するための任意の技術はありますか？画像への画像の背景を設定して、非表示にしたり、画像の前景（画像のsrc要素）を移動するためにとにかくがあります。

私は交換したい画像があるサイトのスキンを記述しようとしています。おかげます。

  

私は彼がHTMLやJavaScriptを変更せずに、純粋なCSSでこれをやろうとしています。

それを理解する方法から、

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

役に立ちましたか？

解決

工夫を少しした後、私はそれを考え出した！

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の古いバージョンでは完璧に見えるしませんです。

他のヒント

あなたが画像を囲む要素を持っている場合は、例えば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">

画像を交換するための最良の方法は、バックグラウンドの位置を設定することです。最初の2枚の異なる画像を作成し、同じ画像内の他の上にそれらを1つずつ置きます。あなたは50x100イメージを作成したい、お肌の要素は、50×50ピクセルであると言います。

次に、このようにいくつかのコードを使用します：

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

ですから、必要な量だけ背景を上に移動第2の画像を表示します。あなたは適切なクラスを設定するためにJavaScriptやサーバー側のコードを使用することができますどちらか。

たぶん、あなたは、要素の不透明度を設定し、あなたが望むイメージに背景を設定することができます。

Musicfreak：。私は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"
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top