對齊內容與背景圖像

我看到這樣的畫面，我想打一個網頁有：對齊內容與背景圖像

所包含HTML和CSS有它，這樣的頁面看起來像這樣，當我上查看火狐全屏：

這正是我所想要的東西，但我想不通的按鈕位置和背景圖像大小的組合，它使得在頁面的大小時，按鈕縮小和米與'太陽'oves，使'太陽'仍然覆蓋。有什麼辦法做到這一點？

@import url(http://fonts.googleapis.com/css?family=Ubuntu+Condensed); 
 
@import url(http://fonts.googleapis.com/css?family=Open+Sans); 
 

 
body{ 
 
    position: fixed; 
 
    background-image: url("dHbl8SP.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    min-height: 5000px; 
 
    background-position: top center; 
 
    background-attachment: fixed; 
 
} 
 

 
.purple{ 
 
    color: rgb(0,100,200); 
 
    border-radius: 50%; 
 
    background-color: rgb(55,0,55); 
 
    font-family: "Ubuntu Condensed", sans-serif; 
 
    font-size: 17pt; 
 
    position:inherit; 
 
    top: 202px; 
 
    left: 679px; 
 
    height: 183px; 
 
    width: 183px; 
 
    border-style: solid;; 
 
    border-color: rgb(15,0,15); 
 
} 
 
.purple:hover{ 
 
    top: 198px; 
 
    left: 675px; 
 
    height: 191px; 
 
    width: 191px; 
 
} 
 
.purple:active{ 
 
    background-color: rgb(45,0,45); 
 
    color: rgb(0,150,150); 
 
} 
 
footer { 
 
    position: fixed; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    left: 0px; 
 
    heigth: 8px; 
 
    align-self: stretch; 
 
    background-color: rgba(8,8,8,.75); 
 
    color: rgb(250,250,200); 
 
    font-family: "Open Sans", sans-serif; 
 
    font-size: 10pt; 
 
    text-align: center; 
 
}

<!doctype HTML> 
 
<html> 
 
<head> 
 
    <title>KavCloud</title> 
 
    <meta charset="UTF-8"/> 
 
    <link href="kavCloud.css" rel="stylesheet" type = "text/css" /> 
 
    <script src="kavCloudScriptingOne.js"></script> 
 
</head> 
 
<body> 
 
    <header> 
 

 
    </header> 
 

 
    <button type = "button" onClick = "f1()" class="purple">Button</button> 
 
    <footer>Page by Sean Robert Letendre</footer> 
 
</body> 
 
</html>

來源

2016-07-14 SeanLetendre

鑑於您使用'cover'作爲背景大小，這意味着太陽所處的位置將會不一致，因此我認爲這對於純CSS是不可能的。如果它不是封面，我想你可以通過使用[vw和vh]（http://www.quirksmode.org/css/units-values/viewport.html）單位（而不是px）來獲得它 –

不要從圖像中刪除太陽，而是使用箱形陰影代替，會節省很多頭痛 – bugwheels94

[與jQuery背景覆蓋成比例的比例元素]的可能重複（http://stackoverflow.com/questions/35942014/ scale-element-proportional-to-background-cover-with-jquery） – LGSon

我會取代你有控制的圖像太陽。由於背景設定爲遮蓋，因此無法解釋太陽所有可能的位置。所以看着它的設備的高度和寬度可能會有所不同。創建太陽作爲圖像，將按鈕放在頂部，並給他們相同的位置和尺寸。

來源

2016-07-14 18:01:28

如果你檢查我所做的上述評論，你會發現幾個精彩的樣本如何做到這一點。 – LGSon

哇，我甚至沒有想到CSS視口尺寸！確實很棒的答案，我必須牢記這一點。 –

對齊內容與背景圖像

回答

相關問題