在没有切断中心的情况下拥有背景

Question

我需要将我的背景图像居中放在屏幕的中心位置，但是当前的代码使得图像在其顶部截断。这里是我到目前为止的代码：

body { 
    background-image: url(img/tooslow.gif); 
    background-repeat: no-repeat; 
    background-position: center; 
    min-width: 100%; 
    min-height: 100%; 
} 
img { 
position: absolute; 
bottom: 15%; 
left: 42.5%; 
margin: auto; 
width: 250px; 
height: 250px; 



<a href="tooslow2.html"><img src="img/too1.png"></a> 

Answer 1

请尝试在下面更新的代码片段。

body { 
 
    background-image: url(img/tooslow.gif); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
} 
 
img { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -125px; 
 
    margin-left: -125px; 
 
    width: 250px; 
 
    height: 250px; 
 
}

<a href="tooslow2.html"><img src="img/too1.png"></a>

Answer 2

body { 
 
    background-image: url(http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
} 
 
img { 
 
position: relative; 
 
bottom: 15%; 
 
left: 42.5%; 
 
margin: auto; 
 
width: 250px; 
 
height: 250px; 
 
}

<a href="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg"><img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg"></a>

变化相对

Answer 3

图像位置添加以下代码的img

img { 
    position: absolute; 
    margin: auto; 
    width: 250px; 
    height: 250px; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
}