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

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对于 more info )。

另外不要忘记使用 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>