我怎样才能使用只是一个CSS样式表替换图像

我想知道是否有可能使用唯一的样式表替换HTML页面上的图像。我知道这是不常见的做法，但我可以访问的唯一东西是样式表，他们在html中使用内联样式。我无法编辑html文件。我怎样才能使用只是一个CSS样式表替换图像

我检查的元件，它看起来像这样：

我试图取代“bullet_ball_glass_green”的形象。我能加入这个样式表来隐藏：

.rmLeftImage{ 

visibility: hidden; 
}

但是，它可能取代图像或添加在它的上面而另一个没有编辑HTML页面？

来源

2012-10-18 Thomas Spade

html元素是否为？ –

查看:: before伪元素，并将新图像设置为该元素的背景图像。您可能需要隐藏隐藏的可见性，但这不适用于旧浏览器 –

是的，这是一个对不起，不知道为什么代码没有发布。 html看起来像这样： –

您可以在图像周围设置div的背景图像（并保留隐藏图像的css）。

.div_class{ 
    background:url('http://yourdomain.com/yourimage.jpg') no-repeat 50% 50%; 
    width:100px; 
    height:100px; 
}

来源

2012-10-18 07:20:17 Justin

的CSS具有更高的层次比HTML样式，你可以只添加

img.rmLeftImage { 
    background-image: url('path to your image'); 
}

来源

2012-10-18 07:24:28

跟上

知名度隐藏图像：隐藏;

，因为你希望它保持图像的宽度/高度和更改背景图片与

背景：网址（“urltoyourimage”）

来源

2012-10-18 07:25:42 Nathron

这里，也许略有争议的技术支持IE8+ and pretty much every other browser。

.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/举例。迄今为止，我只在Chrome中测试过它，它似乎可以工作。提供它可以跨浏览器使用，你根本不需要修改HTML。

有趣的是，我只能在将content: '';应用到.rmLeftImage后继续工作，继承人没有它的jsfiddle：http://jsfiddle.net/Mw76h/，仅用于演示目的。

来源

2012-10-18 07:28:15

我怎样才能使用只是一个CSS样式表替换图像

回答

相关问题