無法正確定位背景圖像

我試圖定位背景圖像，以便它保持與屏幕大小成比例/自適應，而不是浮動到導航欄中。我使用的CSS是：無法正確定位背景圖像

#apology{ 
background-image:url('http://i.imgur.com/jkXf9IE.png'); 
width:50%; 
margin:0 auto; 


background-position:50% 50%; 
background-size:cover; 


position:fixed; 
left:10%; 
top:10%; 
right:10%; 
bottom:10%; 

}

這裏有一個小提琴background-image

來源

2017-03-18 DCR

您必須根據導航的大小將您的「頂部」更改爲實際像素量https://jsfiddle.net/k4t94z74/2/ - 響應式設計仍然使用像素大小。不要以爲百分比就是一切 – ntgCleaner

像this？

#apology{ 
    background-image:url('http://i.imgur.com/jkXf9IE.png'); 
    margin:0 auto; 
    background-position:50% 50%; 
    background-size:cover; 
    position:fixed; 
    top:50px; 
    bottom: 0; 
    left: 15px; 
    right: 15px; 
}

如果您希望徽章在所有情況下都完全可見，即使瀏覽器窗口非常窄，您也必須更改圖像。僅在透明背景上使用徽章創建png圖像，並將藍色添加爲css中的背景顏色。

來源

2017-03-18 17:28:00 Tacud

更新頂css，以像素固定它不是個

#apology { 
    background-image: url(http://i.imgur.com/jkXf9IE.png); 
    width: 50%; 
    margin: 0 auto; 
    background-position: 50% 50%; 
    background-size: cover; 
    position: fixed; 
    left: 10%; 
    top: 52px; //update this 
    right: 10%; 
    bottom: 10%; 
}

工作jsfiddle

來源

2017-03-18 17:24:40 Gaurav

1.）寬度和邊距與固定位置及其頂部/左側/右側/底部參數相矛盾。對於元素本身。

2.）背景位置與cover大小相矛盾。 background-position:50% 50%;將背景圖像的左上角放在容器的中心，這不可能是您想要的。只需要使用background-size: cover;和background-attachment: fixed

來源

2017-03-18 17:33:59 Johannes

無法正確定位背景圖像

回答

相關問題