CSS Sprites 在图像上显示损坏的图像图标,但悬停仍然有效

CSS Sprites showing broken image icon over image, but hover still works(CSS Sprites 在图像上显示损坏的图像图标,但悬停仍然有效)

本文介绍了CSS Sprites 在图像上显示损坏的图像图标,但悬停仍然有效的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想不通..希望其他人可以.

我有一个图像按钮.悬停效果很好.但是,我在按钮图像上显示了 IE 损坏的图像图标.

看这里:时髦图片 Funky Image Hover

如您所见......它们都可以工作,除了那个烦人的破碎图像.

这是我的 CSS:

<上一页>.donate-btn{背景:透明 url(/custom/img/donate-btn.png) 无重复;溢出:隐藏;高度:45px;宽度:210px;向左飘浮;}.donate-btn:悬停{背景:透明 url(/custom/img/donate-btn.png) 无重复;高度:45px;宽度:210px;背景位置:0 -45px;}

解决方案

这仅仅意味着你在 source 属性中引用了一个不存在的图像.您应该考虑改用实际的 <button> 标签.它只需要一些额外的样式属性来移除边框和填充:

.donate-btn{背景:透明 url(/custom/img/donate-btn.png) 0 0 不重复;溢出:隐藏;高度:45px;宽度:210px;边框:无;填充:0;向左飘浮;}.donate-btn:悬停{背景位置:0 -45px;}

我还通过删除悬停状态下的一些不必要的样式来简化您的 CSS.

<button class="donate-btn" type="submit"></button>

I can't figure this out..hopefully someone else can.

I have an image button . The hover effect works fine. However, I have the IE broken image icon over the button image.

Lookie here: Funky Image Funky Image Hover

As you can see...they both work except for that annoying broken image.

Here's my CSS:

.donate-btn{
background: transparent url(/custom/img/donate-btn.png) no-repeat;
overflow:hidden;
height:45px;
width:210px;
float:left;
}
.donate-btn:hover{
background: transparent url(/custom/img/donate-btn.png) no-repeat;
height:45px;
width:210px;
background-position: 0 -45px;
}

解决方案

This simply means you are referencing a non-existent image in the source attribute. You should consider using the actual <button> tag instead. It just needs a few extra style attributes to remove borders and padding:

.donate-btn{
    background: transparent url(/custom/img/donate-btn.png) 0 0 no-repeat;
    overflow:hidden;
    height:45px;
    width:210px;
    border: none;
    padding: 0;
    float:left;
}

.donate-btn:hover{
    background-position: 0 -45px;
}

I also simplied your CSS by removing some unnecessary styling in the hover state.

<button class="donate-btn" type="submit"></button>

这篇关于CSS Sprites 在图像上显示损坏的图像图标,但悬停仍然有效的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:CSS Sprites 在图像上显示损坏的图像图标,但悬停仍然有效

基础教程推荐