在沒有切斷中心的情況下擁有背景

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