2012-05-24 18 views
1

例如,如何更改:悬停背景图像的默认长方形视图?

a:hover { 
    color: black; 
    background:url("images/nav-hm.png"); 
} 

悬停时显示的背景图像总是被包围在周围的链接一个长方形的盒子即使图像不是矩形。

有没有办法去掉长方形的盒子?

由于提前

UPDATE

我打算使用的背景图片 - Image 的图像实际上是一个裁剪出云的图像。我希望云在悬停时显示完整。

即使将背景图像的宽度和高度设置为匹配,它也不会完全显示。这就是所显示的。调节的宽度和高度,以匹配实际图像后 Image2

代码使用

a:hover { 
    color: black; 
    background:url("images/Untitled-2-2.png"); 
    width:337px; 
    height:292px; 
    } 
+1

你能分享[的jsfiddle]现场演示(http://jsfiddle.net/),或者你想发布什么样的图像实现? – Luis

+0

张贴的图像,希望它使事情更清晰=) – TheKraven

回答

0

如果a元件是矩形的(或矩形-ISH,认为它如何能包裹在多行)然后其背景是长方形。取决于您使用border-radius改变其外观后的形状,或者可以选择加入text-shadow的某个特定渲染。如果你提供了你正在尝试完成的模型,那将会有所帮助。

哦,顺便说一句。图像矩形:)即使某些区域完全透明,位图或至少在网络上使用的图像也不能具有不同的形状。

0

下面是完整的跨浏览器的圆角半径的一个例子

a{ 
    padding-left:5px; 
    padding-right:5px; 
    width:337px; 
    height:292px; 
} 


a:hover { 
    color: black; 
    background:url("images/Untitled-2-2.png"); 
/* Add border radius */  
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -khtml-border-radius: 4px; 
    border-radius: 4px; 
} 
+0

我在哪里插入代码?在a:hover类中? – TheKraven

+0

@ TheKraven,它已经在他一个:悬停类 – Imdad

+0

注意到非常感谢=) – TheKraven

相关问题