Question

例如，

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

悬停时显示的背景图像始终包含在链接周围的矩形框中，即使图像不是矩形。

有没有办法拆除矩形盒子外壳？

先谢谢

更新

我打算用于背景图片 - Image 该图像实际上是云的裁剪图像。我希望云在悬停时完全显示。

即使将背景图像的宽度和高度设置为匹配，也不会完全显示。这就是显示的内容。 Image2

调整宽度和高度以匹配实际使用的图像后的代码

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

Answer 1

如果a元素是矩形（或矩形，请考虑它如何包裹多条线），那么它的背景是矩形的。取决于您使用border-radius改变其外观后的形状，或者可以选择加入text-shadow的某些特定渲染。如果你提供了一个你想要完成的模型，会有所帮助。

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

Answer 2

以下是完整的跨浏览器边框半径

的示例

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;
}

如何更改：悬停背景图像的默认矩形视图？

2 个答案: