CSS怎么实现更换图片
发布网友
发布时间：2022-05-11 09:12
共6个回答
懂视网
时间：2022-05-11 13:34
上文：标记语言——为文字指定CSS样式。 Chapter 14 图片替换
随着更多设计师与开发者开始使用标准(特别是CSS),每天都会有许多新技术被发现,达成相同目标的新方法,更好的方法也不断发展着.
"图片替换" 可以说是这种变革的最佳范例,这是用CSS把普通文字置换成图片的技术. 应该如何用CSS把文字换成图片?
如果能把表现用(不重要的或者装饰用的)的图片全放在CSS中是最好的,因为这样能够轻易替换更新过的图片,但却不用更改标记源代码.同样,我们也能确保所有浏览器和设备能正确解析标记源代码的意义,不管有没有完全支持把文字替换成图片的进阶CSS.在这本书中一直强调这样的优势. 没有完美的解决方案
然而,寻找单纯使用CSS将文字置换成图片的"完美"方式几乎跟寻找圣杯没啥两样...因为现在还不存在.仅有能在所有浏览器中正常运作的方法,但是它无法配合辅助程序(比如屏幕阅读器)使用.还有其他能奏效的方法,除非使用者指定浏览器不显示任何图片,但又启用CSS.
虽然在这段文字撰写的时候还没有能够满足所有人(或是所有使用者)的方法,但是这类方法现在的确有不少网站使用.在套用任何图片置换法的时候都必须特别小心,同时也必须了解它会带来的副作用. 能用,但是要小心
这就是本章的目的,届时图片置换带来的便利性,但是相对的也会揭露它的缺点,随着时间的发展,或许会有更多CSS狂热者发现能够做出相同效果的更好方法;在那之前,我们必须善用其中的技巧,衡量得失.
为了让你熟悉图片置换的概念,让我们看看几种常用的方法.先从Fahrner图片替换技巧谈起(Fahrner Image Replacement;FIR).
上一页12 3 4 5 6 7 下一页 阅读全文
热心网友
时间：2022-05-11 10:42
CSS能更换的图片，只能存在于样式中。所以，这个图片也只能是背景图片。
一般是结合：hover来实现的。例如：
.mydiv{
background:图片1 no-repeat;
height:100px;
widht:100px;
}
.mydiv:hover{
background:图片2 no-repeat;
}
这样就实现了图片1和图片2的鼠标移上去的切换。
CSS层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
热心网友
时间：2022-05-11 12:00
一般是结合：hover来实现的。例如：
.mydiv{
background:图片1 no-repeat;
height:100px;
widht:100px;
}
.mydiv:hover{
background:图片2 no-repeat;
}
这样就实现了图片1和图片2的鼠标移上去的切换。
热心网友
时间：2022-05-11 13:34
onmouseover.this.class="xxx"
onmouseout .this.class="xxx"
如果多张图片 就用js代码实现吧.
热心网友
时间：2022-05-11 15:26
a{width:92px; height:22px; padding-top:9px; display:block; background:url('图片地址')no-repeat; color:#000; text-decoration:none}
再定义当鼠标经过时样式
a:hover{background:url('图片地址') left 2px no-repeat;}
热心网友
时间：2022-05-11 17:34
可以用JS
背景用 onclick="this.style.backgroundImage='images/1_1.gif'"
img 用 nclick="this.src='images/1_1.gif'"
