css控制图片的大小，比如鼠标移动到图片上时，显示上半部分，否则显示下半部分。谢啦！急啊

发布网友 发布时间：2022-05-13 04:26

我来回答

共5个回答

懂视网 时间：2022-05-13 08:47

使用情形：防止反复请求图片资源，我们经常采用一张图片多种效果或内容显示。
假设我有纸张竖直方向的一张图片，竖直y轴方向分别是字母：A,B,C....
现在分别要显示A、B、C 等字母，我们的CSS可以这么写：
这里图片一个字母所占的width=20px,height=20px;
.mar_wordA {
background: url("../images/ranking.gif") no-repeat scroll 0 0px transparent;
}

.mar_wordB {
background: url("../images/ranking.gif") no-repeat scroll 0 -20px transparent;
}

.mar_wordC {
background: url("../images/ranking.gif") no-repeat scroll 0 -40px transparent;
}
........................
若果是水平方向的图片，调整x轴的值即可。
注：需要容器负载图片。

CSS控制图片显示.rar (1.2 KB)

热心网友 时间：2022-05-13 05:55

可以实现。假设你的图片大小为100x100px
HTML为：
<div class="imgbox"><img src="你的图片路径" /></div>
CSS为：
.imgbox { height:50px;/*图片大小的一半*/ width:100px; position:relative; overflow:hidden;}
.imgbox img { width:100px; height:100px; position:absolute; top:-50px; }
.imgbox:hover img { top:0px; }
以上代码在CHROME等现代浏览器里测试通过

但是IE6/7对hover伪类的支持是有问题的，一种是百度IE6的hover处理方法，另外一种更简便的就是用js和jquery了，CSS中的.imgbox:hover img { top:0px; }改为
.imgbox img.alt { top:0px; }

脚本编写.imgbox产生onMouseOver事件时，给里面的img加上class="alt"属性；onMouseOut事件时删除之

你会写jquery的话直接用animate变化top值就可以产生图片上下滑动的效果

热心网友 时间：2022-05-13 07:13

你说用CSS，倒是有一种很笨的方法，把一张图片切片成两部分，然后用HTML+CSS拼接起来，上面那部分做一个，用hover，下面那部分做一个,，也用hover，你说用CSS来做，也就只有这种方法了！

不然的话最好用JS或者JQUERY

热心网友 时间：2022-05-13 08:48

这个一般用js控制啊，用css怎么控制啊，hover？这个也不行啊。
用js处理吧，js行吗？

热心网友 时间：2022-05-13 10:39

这怎么能用css控制呢，用jQuery啊亲