我想将此图像作为网页的背景图像。但是,问题是图像不能覆盖整个页面,正如您在此预览中可能看到的那样,并且图像在最右端重复出现。有没有一种方法可以使图像覆盖整个页面(可以是任何方式,拉伸,调整大小或其他新方式)。
我的代码:
<!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屏幕的。我现在还可以,并且要继续前进,请不要发布答案。
jsBin演示
background: url(image.jpg) fixed 50%; background-size: cover; /* PS: Use separately here cause of Safari bug */
fixed(背景附件)是可选的。
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(原因_位置_接受单个和多个(X,Y)的值),但野生具有与该一个错误/速记所以使用如上所述。
/
position
size