html - 与 CSS 中 HTML 中图像的背景位置相关的问题

Question

我有以下 CSS 类:

 .acceptRejectAll a, .acceptRejectAll a:visited{
        background-image: url("../images/view-patient.png");
        background-position: left top;
        background-repeat: no-repeat;
        color: #4B555C;
        float: left;
        height: 35px;
        padding-top: 12px;
        text-align: center;
        text-decoration: none;
        width: 100px;  
  }

和以下 HTML :

<div style="float: none; display: inline-table" class="acceptRejectAll">
    <a style="display:inline-block;height:25px;" href="#" class="fontBlack" id="ctl00_ContentPlaceHolder1_btnAcceptAll">Accept All</a>
</div>

显示如下:

当我减小 css 类的大小时:width : 85px它显示如下:

它从右侧切割图像:

我尝试在 css 类中设置 background-Position :但是无论是左侧还是右侧，图像都无法正确显示

什么是解决方案？

谢谢

Answer 1

为此您需要使用background-size。示例:

background-size: 100% 100%;

请注意，此设置可以缩放您的图像以填充父图像。