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

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

Force div's background-image fetch it's size

html

css

size

background

fetch