问题描述
我想制作 这张图片作为我网页的背景图片.但是，问题是图像没有覆盖整个页面，正如您在 中所见这个预览，它在最右端重复.有没有办法让图像覆盖整个页面(无论是拉伸、调整大小还是新的东西).
I want to make this image as the background image of my webpage. However , the problem is that the image doesn't cover the whole of the page, as you may see in this preview , and it gets repeated at the rightmost end . Is there a way so that the image covers the whole page (be it any way , stretching , re-sizing , or something new).
我的代码:
<!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 屏幕.我现在好了，正在进一步发展，现在请不要发布答案.
I have now finally come to believe that there is almost nothing that can get that image to fit exactly to my PC screen. I am now ok , and am moving further , please don't post answers now.
推荐答案
background: url(image.jpg) fixed 50%;
background-size: cover; /* PS: Use separately here cause of Safari bug */
以上只是以下内容的简写:
The above is just a shorthand for:
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 有这个 / 速记的错误，因此请按上述方式使用.
where the / is used in background shorthand to separate and distinguish position from size (cause position accepts both single and multiple (X,Y) values), but Safari has a bug with this / shorthand so use as described above.
这篇关于CSS 中的全屏响应式背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！