logo标签列表

背景图片无法覆盖整个屏幕

htmlcssbackground
3

我的背景图片尺寸为1620*1080，而我的屏幕分辨率为1366*768。为什么右侧约15%的屏幕没有被覆盖呢？

这是我的代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { 
    min-height: 100%;
    min-width: 100%;
    background-image:url(background.png);
    background-repeat: no-repeat;
}

div#container {
    margin: 0 auto;
    background-color: red;

}
</style>
</head>
<div id="container">

</div>
<body>
</body>
</html>

正如您所看到的，我已经添加了

标签。

min-height: 100%;
min-width: 100%;

想必这些对你有所帮助。而 background-repeat: no-repeat; 只是为了让它不覆盖整个屏幕。

有什么想法吗？谢谢！

2
你为什么在 body 标签外面有一个 div 元素呢？ - stark
2个回答
8

试试这个：

body { 
    background: url(background.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

无论窗口大小是大还是小，这将为您提供全尺寸的背景图像。

如果这不起作用，请阅读此css-tricks帖子的其余部分。

4

你的图片比例为 1620/1080=1.5，屏幕分辨率为 1366/768=1.77。基本上是图片以保持比例的方式以更小的尺寸显示，右侧区域被封锁了。

尝试只发布大小。

background-size:100% 100%;
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接