Question

我正在尝试在我的网站上添加图片，但是它不起作用，我的代码在下面

div#planet {
  z-index: -10;
  width: 450px;
  height: 549px;
  position: absolute;
  background: url("http://heroic.cosmicpvp.com/images/planet.jpg") no-repeat top center;
  top: -75px;
  right: -450px;
}

<div id="planet"></div>

Answer 1

尝试这个小提琴。很好。

https://jsfiddle.net/Sampath_Madhuranga/4qtum631/4/

#planet {
  z-index: 9;
  width: 100%;
  height: 549px;
  background: url("http://heroic.cosmicpvp.com/images/planet.jpg") no-repeat;
  background-size:cover;
  background-position:top center; 
}

<div id="planet"></div>

https://jsfiddle.net/Sampath_Madhuranga/4qtum631/4/

Answer 2

无法猜测您为什么使用right和top属性减去值。其将视口从顶部移至-75的原点，向右移-450的原点。因此它实际上离开了窗口。

只需删除它们。背景图像应可见。

div#planet {
   z-index: -10;
   width: 450px;
   height: 549px;
   position: absolute;
   background: url("http://heroic.cosmicpvp.com/images/planet.jpg") no-repeat top center;
   margin: 0;
}

Codepen

Answer 3

正如@Akrion和@MJ博士在评论中提到的那样，您对top和right的定位将<div>推离了页面。

删除这两行代码将解决此问题：

    div#planet {
        width: 450px;
        height: 549px;
        z-index: -10;
        background: url("http://heroic.cosmicpvp.com/images/planet.jpg") no-repeat top center; */
    }

Answer 4

 div#planet {
    width: 450px;
    height: 549px;
    z-index: -10;
    background: url("http://heroic.cosmicpvp.com/images/planet.jpg") no-repeat top center; /* use this this will helpfull */
}

图片未在div中显示

4 个答案: