我想制作this image作为我网页的背景图片。然而，问题是图像没有覆盖整个页面，正如您在 this preview 中看到的那样。 , 并在最右端重复。有没有办法让图像覆盖整个页面(无论是任何方式、拉伸(stretch)、调整大小或新的方式)。
我的代码:
<!DOCTYPE HTML>
<html>
<head>
<title>Angry Birds Star Wars</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
body {
background: url('http://www.androidtapp.com/wp-content/uploads/2012/11/Angry-Birds-Star-Wars-Menu.png');
}
</style>
</head>
<body></body>
</html>
谢谢。
更新:
我现在终于开始相信，几乎没有任何东西可以让图像完全适合我的 PC 屏幕。我现在很好，并且正在更进一步，请不要现在发布答案。
最佳答案
background: url(image.jpg) fixed 50%;
background-size: cover; /* PS: Use separately here cause of Safari bug */
fixed(背景附件)是可选的。
以上只是简写:
background-image : url(image.jpg);
background-attachment : fixed;
background-position : 50% 50%; /* or: center center */
background-size : cover; /* CSS3 */
您可以在所有现代浏览器中但 Safari 使用:
background: url(image.jpg) fixed 50% / cover;
其中 / 用于后台速记以将 position 与 size 分开和区分(因为 position 接受单个和多个 (X,Y) 值)，但 Safari 对此 / 简写存在错误，因此请按上述方式使用。
关于html - CSS 中的全屏响应式背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50488746/