Question

我想增加边框和背景图片之间的距离...我尝试添加padding: 20px;但它不起作用。

.Tab1 {
  background-image: url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
  width: 100px;
  height: 75px;
  display: block;
}
.Tab1:hover {
  border: 1px solid green;
}

<div class="Tab1"></div>

Answer 1

您可以使用padding和background-clip:content-box;增加边框与背景图片之间的空间（请参阅more info的MDN）。

另外，请不要忘记使用background-position:center;

将背景图像居中

.Tab1 {
    background-image:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
    background-position:center;
    width:100px;
    height:73px;
    display:block;
    padding:20px;
    background-clip:content-box;
}
.Tab1:hover {
    border:1px solid green;
}

<div class="Tab1"></div>

如果您还想避免边框创建的悬停时的位置捕捉，您可以添加透明边框并仅在悬停时更改颜色：

.Tab1 {
  background-image: url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-clip: content-box;
  width: 100px;
  height: 75px;
  display: block;
  padding: 50px;
  border: 1px solid transparent;
}
.Tab1:hover {
  border-color: green;
}

<div class="Tab1"></div>

Answer 2

.Tab1{background-image:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
    background-repeat:no-repeat;
    background-position:center;
 background-clip:content-box;
        width:100px;
        height:75px;
        display:block;
padding:20px;
}

.Tab1:hover{border:1px solid green;}

这就是您所需要的，首先将背景与框的中心对齐，然后使用填充CSS添加填充，就像您最初尝试的那样。 background-repeat属性将停止背景重复到CSS的填充。

还请记得在填充值中添加单位，以防您尝试执行添加padding:20时所写的内容。

Answer 3

你可以在这里检查图像和边框之间的空间......

＆＃13;

.Tab1{background-image:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
        width:100px;
        height:75px;
        display:block;
        padding:15px;
        background-repeat:no-repeat;
        background-position:center center;
        border:1px solid #fff;
    }
.Tab1:hover{border:1px solid green;}

＆＃13;

<div class="Tab1">
    
    
</div>

＆＃13;

感谢

Answer 4

css code     
.Tab1 {   
   background:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
   background-position:center;
   background-repeat:no-repeat;
   width:100px;
   height:75px;
   display:block;
   padding:15px;
   }
   .Tab1:hover {   
   border:1px solid green;
   margin-left:-1px;
   margin-top:-1px;
   }

增加边框和背景图像之间的空间

4 个答案: