Question

我有一个DIV，需要在精灵图像中放置一个箭头。

精灵图片中的箭头为276x276px，但我需要以一半大小显示。

div {
  background-attachment: scroll;
  background-clip: border-box;
  background-image: url("https://www.designworkplan.com/content/3-read/8-free-vector-arrows/designworkplan_vector_arrow_collection-01.png");
  background-origin: padding-box;
  background-position: -55px -44px;
  background-size: auto;
  box-sizing: border-box;
  display: block;
  font-size: 11px;
  height: 276px;
  line-height: 15px;
  position: absolute;
  left: 20px;
  top: 20px;
  width: 276px;
}

<div></div>

该怎么做？

Answer 1

据我了解，您希望缩小箭头，但仍将其保留在容器中。

那样工作：

div.background {
  background-attachment: scroll;
  background-clip: border-box;
  background-image: url("https://www.designworkplan.com/content/3-read/8-free-vector-arrows/designworkplan_vector_arrow_collection-01.png");
  background-origin: padding-box;
  background-position: -55px -44px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transform: scale(0.5);
  transform-origin: top left;
}

.wrapper {
  box-sizing: border-box;
  display: block;
  font-size: 11px;
  height: 276px;
  line-height: 15px;
  position: absolute;
  left: 20px;
  top: 20px;
  width: 276px;
  background: red;
}

<div class="wrapper">
  <div class="background">
  </div>
</div>

如果您只是想缩小箭头（没有任何包装纸），则将其删除。

div {
  background-attachment: scroll;
  background-clip: border-box;
  background-image: url("https://www.designworkplan.com/content/3-read/8-free-vector-arrows/designworkplan_vector_arrow_collection-01.png");
  background-origin: padding-box;
  background-position: -55px -44px;
  height: 276px;
  position: absolute;
  left: 20px;
  top: 20px;
  width: 276px;
  transform: scale(0.5);
  transform-origin: top left;
  line-height: 15px;
  font-size: 11px;
}

<div></div>

Answer 2

add this  transform: scale(0.5);

div {
  background-attachment: scroll;
  background-clip: border-box;
  background-image: url("https://www.designworkplan.com/content/3-read/8-free-vector-arrows/designworkplan_vector_arrow_collection-01.png");
  background-origin: padding-box;
  background-position: -55px -44px;
  background-size: auto;
  box-sizing: border-box;
  display: block;
  font-size: 11px;
  height: 276px;
  line-height: 15px;
  position: absolute;
  transform: scale(0.5);
  left: 20px;
  top: 20px;
  width: 276px;
}

<div></div>

使用CSS调整背景图片精灵组件的大小

2 个答案: