Question

我有一个 div ，它绝对需要自动宽度，这取决于其中的文字长度。当我用鼠标悬停它时，我想要一个蓝色光环作为该按钮的背景图像显示。

但这是我无法解决的挑战：我想要蓝色光环png图像来获取div的确切宽度，我想要一个真正的晕圈变形图像不考虑任何比例。

如何在不给出div宽度的绝对值的情况下完成此操作？ 并且不使用HTML和CSS3以外的任何内容？

HTML方面：

<div class="button">
  <p>Hover here!</p>
</div>

CSS方面：

.button {
  width: auto;
  height: 80px;
  line-height: 81px;
  font-family: sans-serif;
  display: inline-block;
}

.button:hover {
  background: url("http://img15.hostingpics.net/pics/300291bluehalo.png") center bottom no-repeat;
}

JSFiddle：https://jsfiddle.net/ynwsmkrz/5/

Answer 1

您需要做的就是向background-size: cover;添加.button:hover，如下所示：

<强> CSS：

.button {
  width: auto;
  height: 80px;
  line-height: 81px;
  font-family: sans-serif;
  display: inline-block;
}

.button:hover {
  background: url("http://img15.hostingpics.net/pics/300291bluehalo.png") center bottom no-repeat;
  background-size: cover;
}

它使背景图像覆盖整个div，而不会裁剪它。希望我的回答很有帮助！

强制div的背景图像获取它的大小

1 个答案: