Question

我尝试使用图像中的特定位置作为div的背景。

我想使用其中一个彩色方块作为整个div的背景，并在角落处使用圆形方块。但我不知道该怎么做。我唯一能找到的是如何使用整个图像作为背景，如：

.paragraph-container .paragraph-background {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url('/assets/images/panel_beige.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Answer 1

关键属性为background-position: <x_position> <y_position>。背景图像的原点是左上角。负<x_position>值将向左移动图像，负<y_position>值将向上移动图像。运行代码段以查看示例。这两种形状都是通过组合sprite sheet image的部分来构建的。为了实现您所需要的，您需要将HTML元素的宽度和高度与您感兴趣的精灵部分的宽度和高度以及该部分的坐标相匹配。

/* Apply sprite sheet to all elements with class "sprite" */
.sprite{background-image: url(https://i.imgur.com/RiWA8yS.png)}

/* Box */
[class*=box_section]{float: left; width:16px; height:16px;}
[class*=box_row]{clear:both;}
.box_section__top_left{background-position: -324px -36px;}
.box_section__top_middle{background-position: -342px -36px;}
.box_section__top_right{background-position: -360px -36px;}
.box_section__middle_left{background-position: -324px -54px;}
.box_section__middle_middle{background-position: -342px -54px;}
.box_section__middle_right{background-position: -360px -54px;}
.box_section__bottom_left{background-position: -324px -72px;}
.box_section__bottom_middle{background-position: -342px -72px;}
.box_section__bottom_right{background-position: -360px -72px;}

/* Bar */
.bar{margin-top: 10px; float:left; clear: both;}
[class*=bar_section]{float: left;}
.bar_section__left, .bar_section__right{width: 3px; height: 12px;}
.bar_section__left{background-position: -463px -290px;}
.bar_section__middle{
  width: 16px;
  height: 12px;
  background-position: -468px -290px;
}
.bar_section__right{background-position: -486px -290px;}

<div class='box'>
  <div class='box_row__top'>
    <div class='sprite box_section__top_left'></div>
    <div class='sprite box_section__top_middle'></div>
    <div class='sprite box_section__top_middle'></div>
    <div class='sprite box_section__top_middle'></div>
    <div class='sprite box_section__top_middle'></div>
    <div class='sprite box_section__top_middle'></div>
    <div class='sprite box_section__top_right'></div>
  </div>
  <div class='box_row__middle'>
    <div class='sprite box_section__middle_left'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_right'></div>
  </div>
  <div class='box_row__middle'>
    <div class='sprite box_section__middle_left'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_right'></div>
  </div>
  <div class='box_row__middle'>
    <div class='sprite box_section__middle_left'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_right'></div>
  </div>
  <div class='box_row__middle'>
    <div class='sprite box_section__middle_left'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_right'></div>
  </div>
  <div class='box_row__middle'>
    <div class='sprite box_section__middle_left'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_middle'></div>
    <div class='sprite box_section__middle_right'></div>
  </div>
  <div class='box_row__bottom'>
    <div class='sprite box_section__bottom_left'></div>
    <div class='sprite box_section__bottom_middle'></div>
    <div class='sprite box_section__bottom_middle'></div>
    <div class='sprite box_section__bottom_middle'></div>
    <div class='sprite box_section__bottom_middle'></div>
    <div class='sprite box_section__bottom_middle'></div>
    <div class='sprite box_section__bottom_right'></div>
  </div>
</div>

<div class='bar'>
  <div class='sprite bar_section__left'></div>
  <div class='sprite bar_section__middle'></div>
  <div class='sprite bar_section__middle'></div>
  <div class='sprite bar_section__middle'></div>
  <div class='sprite bar_section__middle'></div>
  <div class='sprite bar_section__middle'></div>
  <div class='sprite bar_section__middle'></div>
  <div class='sprite bar_section__middle'></div>
  <div class='sprite bar_section__right'></div>
</div>

如何使用图像中的特定位置作为背景？

1 个答案: