如何让背景缩放到任何屏幕？

如何获得我的背景以适应任何屏幕？我试过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

如何让背景缩放到任何屏幕？

回答

相关问题