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

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;(见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>