6

我熟悉用图像替换文本的 CSS 技术。例如，这里有 9 个：http ://css-tricks.com/nine-techniques-for-css-image-replacement/

有没有替换图像的技术？无论如何将图像的背景设置为图像，然后隐藏或移动图像的前景（图像 src 元素）。

我正在尝试为具有要替换的图像的站点编写皮肤。谢谢。

根据我的理解，他试图在纯 CSS 中做到这一点，而不更改 HTML 或 JavaScript。

那是对的。我正在向现有页面添加新样式表。假设我不能修改 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

替换图像的最佳方法是设置背景位置。首先创建两个不同的图像，并将它们放在同一图像中的另一个之上。假设您的皮肤元素是 50x50 像素，您将创建一个 50x100 的图像。

然后使用如下代码：

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

因此，要查看第二张图像，您将背景向上移动所需的数量。您可以使用 javascript 或服务器端代码来设置适当的类。

于 2009-07-03T19:32:25.487 回答
-1

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

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

于 2009-07-03T19:28:38.877 回答
-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 回答