Question

我想将背景图像放置在body元素上以在整个浏览器屏幕上拉伸。

问题在于，执行此操作时，图像会“放大”，因此图像被切割。

例如，让我们拍摄当前图像：

http://www.baltana.com/files/wallpapers-15/Pug-Dog-HD-Wallpapers-38933.jpg

并查看其如何缩放图像并剪切周围的某些部分。

我尝试使用CSS背景封面功能，但没有运气。

body {
  background-image: url('https://i.stack.imgur.com/7xThY.jpg');
  background-size: cover, 100%;
  background-position: 50% 50%;
  background-attachment: fixed;
}

Answer 1

尝试一下可能会起作用

 <html>
        <head>
            <title>This is a test page</title>
            <style>
                body {
                background-image: url('http://www.baltana.com/files/wallpapers-15/Pug-Dog-HD-Wallpapers-38933.jpg');
                background-size: 100%;
                backgroun-reapeat:no-repeat
                }

            </style>
        </head>
        <body>

        </body>
    </html>

Answer 2

body {
  background-image: url('https://i.stack.imgur.com/7xThY.jpg');
  background-size: 100vw 100vh;
  background-position: 50% 50%;
  background-attachment: fixed;
}

大概这就是你要找的！但这会改变图像的长宽比！

Answer 3

您的意思是这样的吗？

html{
    min-height:100%;
    position:relative;
}
body {
    height: 100%;
    background-image: url('http://www.baltana.com/files/wallpapers-15/Pug-Dog-HD-Wallpapers-38933.jpg');
    background-size:  contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

我没有将其放在代码段中，因为代码在其中不起作用。我在chrome，firefox，edge甚至Internet Explorer中尝试了它，它似乎工作正常。希望这会有所帮助。

人体背景图像-图像放大了

3 个答案: