Question

因此，当我将鼠标悬停在我的新网站上的按钮上时，会出现箭头的背景图像。效果很好。但是，在Chrome（尚未在其他浏览器上测试过）中，第一个显示为大箭头，第二个显示为正确大小。

这是我的网站：

这是我使用的代码：

HTML：

<a class="btn1" href="contact/"><h4>
            PLAN UW PROJECT
</h4></a>

CSS：

  .item a {
    text-decoration: none;
}

.item h4 {
    position: absolute;
    max-width: 200px;
    width: 100%;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    line-height: 43px;
    font-size: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 28px;
    padding-right: 28px;
    margin-top: 0px;
    bottom: 180px;
    left: 8.5%;
    color: white;
    border-radius: 6px;
    letter-spacing: 0.5px;
    text-transform: none;
    border-style: solid;
    border-width: 1.5px;
    border-color: white;
    -webkit-font-smoothing:antialiased;
    background-position: 93% 50%;
    background-repeat: no-repeat;

  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

.item h4:hover {
    position: absolute;
    max-width: 200px;
    text-align: center;
    width: 100%;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    line-height: 43px;
    font-size: 16px;
    left: 8.5%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 46px;
    margin-top: 0px;
    color: white;

    background: url(../images/arrow_btn_banner.png) no-repeat;
    background-size: 30px 30px;

    background-position: 93% 50%;
    border-radius: 6px; 
    letter-spacing: 0.5px;
    text-transform: none;
    border-style: solid;
    border-width: 1.5px;
    border-color: white;
    -webkit-font-smoothing:antialiased;
}

我尝试将背景大小放在背景图像之上，但这并不起作用。我试过改变图像的大小。但那也不起作用。

Answer 1

也许您应该在background-image中将background-size和0设置为h4 并且仅在background-size上重置h4:hover，因此已加载bg图像。

CSS3悬停状态背景图像大小

1 个答案: