4

スタイルシートだけを使ってhtmlページの画像を置き換えることができるのだろうかと思っていました。これは一般的な方法ではないことは知っていますが、私がアクセスできるのはスタイルシートだけであり、HTMLでインラインスタイルを使用していました。htmlファイルを編集する方法がありません。

要素を調べたところ、次のようになりました。

「bullet_ball_glass_green」の画像を置き換えようとしています。これをスタイルシートに追加することで、それを非表示にすることができました。

.rmLeftImage{

visibility: hidden;
}

しかし、htmlページを編集せずに画像を置き換えたり、画像の上に別の画像を追加したりすることは可能ですか？

4

4 に答える 4

0

で画像を隠し続ける

可視性：非表示;

画像の幅/高さを維持し、背景画像を次のように変更する必要があるため

background：url（'urltoyourimage'）

于 2012-10-18T07:25:42.350 に答える
0

画像の周囲にdivの背景画像を設定できます（そして、画像を非表示にするcssを保持します）。

.div_class{ 
  background:url('http://yourdomain.com/yourimage.jpg') no-repeat 50% 50%; 
  width:100px;
  height:100px;
}
于 2012-10-18T07:20:17.920 に答える
0

cssはhtmlのスタイルよりも高い階層を持っているので、追加するだけです。

img.rmLeftImage {
   background-image: url('path to your image');
}
于 2012-10-18T07:24:28.280 に答える
0

これは、 IE8+と他のほとんどすべてのブラウザをサポートする少し物議を醸すテクニックです。

.rmLeftImage { 
    content: '';
}

.rmLeftImage:after {
    display: block;
    content: '';
    background: url(../your/new/image);
    width: 220px; /* image width */
    height: 240px; /* image height */
    position: relative;  /* image width */
}
​

例については、 http：//jsfiddle.net/z9QUu/2/を参照してください。私はこれまでクロムでこれをテストしただけで、動作しているように見えます。クロスブラウザで機能する場合は、HTMLを変更する必要はまったくありません。

興味深いことに、これを適用content: '';した場合にのみ機能させることができました。これは、デモンストレーションの目的で、.rmLeftImageそれなしのjsfiddle：http://jsfiddle.net/Mw76h/です。

于 2012-10-18T07:28:15.327 に答える