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

Question

这是我的代码：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我想在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>

Answer 2

Here是您想要的输出。

您为背景图片添加了不同的宽度。可以做的最好的事情是将内部div的宽度和高度设置为100％。 的 HTML

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

和CSS

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

Answer 3

使用background-size属性..

这是结果..

https://jsfiddle.net/dhgnampc/16/

HTML：

<div class="dl">

<div style="background:url(https://upload.wikimedia.org/wikipedia/en/0/04/Sprite_Remix_3_Versions.jpg)no-repeat 0 0;
        margin:30px auto;
      background-size:contain;">
 </div>

的CSS：

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

 .dl div{width:100%;height:100%;}

Answer 4

试试这个css代码

$ nvm ls
 v0.10.33
 v0.12.7
 ->    system
 default -> 0.12 (-> v0.12.7)
 stable -> 0.12 (-> v0.12.7) (default)
$ nvm alias default 0.12
 default -> 0.12 (-> v0.12.7)
$ node --version
 v0.10.25

并删除内联样式的高度和宽度。