如何讓背景縮放到任何屏幕？

如何獲得我的背景以適應任何屏幕？我試過background-size: cover和height: auto，但沒有任何效果！有任何想法嗎？我似乎無法找到任何可行的方法。我很欣賞你能爲這個問題提供的任何東西。如何讓背景縮放到任何屏幕？

<!DOCTYPE html> 
<html> 
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Metro-M.svg/2000px-Metro-M.svg.png"> 
<head> 
<style> 
html { 
    background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top; 
    background-size: cover; 
    margin: 0; 
    padding: 0; 
    position: fixed; 
    width: 100%; 
    height: auto; 
    position: fixed; 
    top: 0; 
    left: 0; 
} 
h1 { 
    position: absolute; 
    top: 21%; 
    left: 25%; 
    color: white; 
    font-family: Arial; 
    font-size: 4.6vw; 
    letter-spacing: 1px; 
} 
p { 
    position: absolute; 
    width: 250px; 
    top: -1px; 
    left: 15px; 
    height: 25px; 
    font-family: Arial; 
} 
ul { 
    word-spacing: .2em; 
    letter-spacing: .2em; 
} 
ul li { 
    font-family: Arial; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 40px; 
    top: 43%; 
    display: inline-block; 
    margin-top: 250px; 
    margin-left: 115px; 
    letter-spacing: 1px; 
    word-spacing: normal; 
    background-color: rgba(5, 4, 2, 0.1); 
    border: 2px solid white; 
    color: white; 
    text-align: center; 
    text-decoration: none; 
    font-size: 90%; 
    width: 150px; 
    height: 40px; 
} 
ul li:link, 
ul li:visited { 
    font-family: Arial; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 40px; 
    display: inline-block; 
    margin-top: 250px; 
    margin-left: 115px; 
    letter-spacing: 1px; 
    word-spacing: normal; 
    background-color: rgba(5, 4, 2, 0.1); 
    border: 2px solid white; 
    font-size: 90%; 
    width: 150px; 
    height: 40px; 
    text-decoration: none; 
    color: white; 
} 
li { 
    text-decoration: none; 
    color: white; 
} 
ul li:hover, 
ul li:active { 
    background-color: white; 
    color: black; 
    text-decoration: none; 
} 

ul li a:hover, ul li a:active { 
    background-color: white; 
    color: black; 
} 

ul li a { 
    display: inline-block; 
    height: 100%; 
    width: 100%; 
    color: white; 
    text-decoration: none; 
} 


@media screen and (max-width: 1024px) { /* Specific to this particular image */ 
    body { 
     left: 50%; 
     margin-left: -512px; /* 50% */ 
    } 
} 
</style> 
<link rel="stylesheet" type="text/css" href="m.css"> 
<title>morgan</title> 

</head> 
<body> 
<center><h1>A Girl With A Passion</h1></center> 
<ul> 
<li><a href="www.youtube.com" class="life" ><strong>MY LIFE</strong></a></li> 
<li><a href="www.youtube.com" class="prot"><strong>PORTFOLIO</strong></a></li> 
<li><a href="www.youtube.com" class="resume"><strong>RESUME</strong></a></li> 
<li><a href="about.html" class="me"><strong>ABOUT ME</strong></a></li> 
</ul> 

</body> 
</html>

來源

2016-02-08 Morgan

你是什麼意思時，你說：「大規模篩查」？描述你想要的確切行爲將有助於人們找到正確的答案 –

您可以使用位置技巧，全部設置爲0。

html { 
 
    background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top; 
 
    background-size: cover; 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
}

或者同時設置width:100%和height:100%。

html { 
 
    background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top; 
 
    background-size: cover; 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
}

來源

2016-02-08 19:12:08 Stickers

謝謝！這完美地解決了我的問題！ – Morgan

如何讓背景縮放到任何屏幕？

回答

相關問題