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

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，而不裁剪它。希望我的回答对您有所帮助!