html

CSS中的全屏响应式背景图片

发布于 2021-02-02 16:57:42

我想将此图像作为网页的背景图像。但是，问题是图像不能覆盖整个页面，正如您在此预览中可能看到的那样，并且图像在最右端重复出现。有没有一种方法可以使图像覆盖整个页面（可以是任何方式，拉伸，调整大小或其他新方式）。

我的代码：

<!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屏幕的。我现在还可以，并且要继续前进，请不要发布答案。

关注者

被浏览

110

1 个回答

面试哥 2021-02-02

为面试而生，有面试问题，就找面试哥。
jsBin演示
```
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（原因_位置_接受单个和多个（X，Y）的值），但野生具有与该一个错误/速记所以使用如上所述。

知识点

html

面圈网VIP题库全新上线，海量真题题库资源。 90大类考试，超10万份考试真题开放下载啦

去下载看看