在另一个样式的div中安装带有背景图像的div

Question

这是我的代码:

.dl {
    width: 200px;
    height: 200px;
    background: pink;
    text-align: center;
    border: 1px red solid
}

<div class="dl">
  <div style="background:url(https://upload.wikimedia.org/wikipedia/en/0/04/Sprite_Remix_3_Versions.jpg); width:160px; height:323px; margin:0 auto">
  </div>
</div>

我想在div容器中放入一个带背景图像的div.现在,内部div的背景图像的宽度和高度都大于容器.

我该怎么做呢？下面是我想要完成的图片.

Answer 1

我已将内联样式更改为外部如果您想要更改图像,您可以更改background-position-x它将工作,因为它是一个精灵图像

.dl {
  width: 200px;
  height: 200px;
  background: pink;
  text-align: center;
  border: 1px red solid;
  display:inline-block;
}
.dl div {
  background: url(https://upload.wikimedia.org/wikipedia/en/0/04/Sprite_Remix_3_Versions.jpg) no-repeat;
  background-size: cover;
  width: 50%;
  height: 100%;
  margin: 0 auto;
}

.dl:nth-of-type(2) div{
  background-position-x: 50%;
}
.dl:nth-of-type(3) div{
  background-position-x: 100%;
}

<div class="dl">
  <div>
  </div>
</div>

<div class="dl">
  <div>
  </div>
</div>

<div class="dl">
  <div>
  </div>
</div>