2

我需要为具有背景图像的类添加填充。但是,当我这样做时,填充不会添加到背景图像中,只是锚点。我究竟做错了什么?这是我的CSS:

.heart {
    width:200px;
    height:18px;
    background:url(/images/content/digital-learning/course-library/sprite-favorites.png) 0px 18px repeat-y;
    padding-left: 20px;
    display:block;
}
4

2 回答 2

8

尝试margin-left: 20px;改用。

Margin是在容器外又padding是在容器内,所以 padding 不会移动容器的背景。

于 2013-04-29T15:52:31.163 回答
0

背景可以显示基于background-origin: content-box;

.heart {
  width: 200px;
  height: 18px;
  border: 1px solid tomato;
  background: url('https://via.placeholder.com/50x100') left center repeat-y;
  padding-left: 20px;
  display: block;
  background-origin: content-box;
}
<div class="container">
  <div class="heart">x</div>
</div>

或者

另一种解决方案是background-position-x: 20px;

.heart {
  width: 200px;
  height: 18px;
  border: 1px solid tomato;
  background-image: url('https://via.placeholder.com/50x100');
  padding-left: 20px;
  display: block;
  background-position-x: 20px;
  background-repeat: repeat-y
}
<div class="container">
  <div class="heart">x</div>
</div>

于 2020-01-06T11:22:30.653 回答