CSS来替换图像

Question

我熟悉CSS技术与图像替换文本。举例来说，这里是他们的9：的http：// CSS- tricks.com/nine-techniques-for-css-image-replacement/

是否有替代图像中的任何技术？反正有一个图像的背景设置为一个图像，然后隐藏或移动图像的前景（图像src元素）。

我试图写有我要替换的图像的部位皮肤。感谢。

  

这是我如何理解他想这样做的纯CSS，没有更改HTML或JavaScript。

这是正确的。我加入了新的样式到现有的页面。让说，我不能修改HTML或JavaScript的使用

Answer 1

修修补补的一点点之后，我想通了！

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。

Answer 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">

Answer 3

，以取代图像的最佳方法是设置背景位置。首先创建两个不同的图像，并把它们一个在另一个之上相同的形象。说你的皮肤元素为50x50像素，你会创建一个50×图像。

然后使用一些这样的代码：

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

所以，查看您通过将所需量移动背景组成第二图像。你既可以使用JavaScript或服务器端代码来设置相应的类。

Answer 4

也许可以设置一个元件的不透明度，然后将背景设置为想要的图像。

Musicfreak：我的意思是使用两个元素

Answer 5

你将不得不分配不同的类，针对两个状态然后写一些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"
}