我对这个很陌生，所以我真的为我的无知道歉!
我页面上的标题比全屏浏览器宽。如何让标题变窄，使其适合屏幕(理想情况下，周围留有白色小边框)？
当我调整浏览器大小时，背景图像发生变化，使标题文本在图像中的天空上移动时变得不可读。如何让图片“保持静止”/就位？
我正在使用的代码如下。希望我说得有道理……(编码是我多年来最有趣的事情，很高兴有一个社区可以帮助我克服障碍，所以提前谢谢你!)
<head>
<link href="/normalize.css" rel="stylesheet">
<title>You're beautiful.</title>
<style>
header {
text-align: left;
background: url("http://i.imgur.com/adSgDvK.jpg");
width:100%;
margin-left:auto;
margin-right:auto;
background-position:center;
background-repeat:no-repeat;
background-size: cover;
padding: 30px;
font-family: courier;
border: 7px solid black;
border-radius: 20px;
background-position: fixed;
}
img {
margin: 10px 10px 0px 0px;
border: 7px solid white;
border-radius: 20px;
}
h1 {
font-size: 70px;
padding-bottom: 70px;
vertical-align: super;
line-height: 70%;
height: 300px;
color: white;
}
ul {
padding: 10px;
background: black;
margin-bottom: -30px;
margin-left: -30px;
}
li {
display: inline;
padding: 0px 50px 0px 50px;
font-size: 20px;
}
a
{
color: white;
}
body {
font-family: courier;
}
</style>
最佳答案
要使它的尺寸合适你可以做
header{
width:100%;
height:auto;
}
并把它保持在你能做的相同位置
header{
position:fixed;
}
加上你的代码就可以了
header{
position:fixed;
width:100%;
height:auto;
text-align: left;
background: url("http://i.imgur.com/adSgDvK.jpg");
margin-left:auto;
margin-right:auto;
background-position:center;
background-repeat:no-repeat;
background-size: cover;
padding: 30px;
font-family: courier;
border: 7px solid black;
border-radius: 20px;
}
关于html - 如何让标题中的背景图像保持固定，并且标题小于全屏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26528056/