我正在做一个背景图像需要完全覆盖整个页面的项目。我无法使用属性“ background-attachment:cover”,因为此页面也需要在不支持背景附件的iOS上可见。
.sky-background {
background-image: url("https://images.unsplash.com/photo-1514477917009-389c76a86b68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
/* cannot use this property */
/* background-attachment:fixed; */
}
<body class="sky-background">
</body>
我一直在寻找可用于iOS的替代产品,但到目前为止,我还没有发现任何令人满意的产品。谁能提供任何指针?
答案 0 :(得分:0)
您可以尝试一下。
html {
height: 100%;
}
body.sky-background {
height: 100%;
}
答案 1 :(得分:0)
这与文档高度有关。尝试使用body {min-height: 100vh;}
或更好的html {100%};
。
答案 2 :(得分:0)
使用它,希望它会对您有所帮助。
<!DOCTYPE html>
<html>
<head>
<style>
html {
height: 100%;
}
body {
background-image: url("https://images.unsplash.com/photo-1514477917009-389c76a86b68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>The background-image Property</h1>
<p>Hello World!</p>
</body>
</html>
答案 3 :(得分:0)
仅在您的身体元素上增加高度即可完成这项工作。使用高度:100vh;在.sky背景上。希望对您有帮助
.sky-background {
background-image: url("https://images.unsplash.com/photo-1514477917009-389c76a86b68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body class="sky-background">
</body>
</html>