Question

现在好几天....我一直试图以正确的方式修复/居中我的背景图像。我附上了一个展示这个的例子。

图A：我需要我的bg图像才能全屏显示（自定义大小适合）。图B：我还需要我的bg图像适合垂直res，而地平线要居中，因为我只需要我的浏览器窗口等。

我有谷歌地狱和回来......没有好的解决方案？是否有可能做到这一点？或者我要求css / html5

好的，这是我的代码：如果你想看看下面的图片...... enter image description here

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
	margin: 0px;
	font-family: Arial;
	font-size: 14px;
	color: #999;
	text-align: center;
	background-image: url(bg.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	background-color: #975d7f;
}
</style>
</head>

<body>
</body>
</html>

Answer 1

不是100％确定您正在寻找的东西，但我认为这可能符合您的需求。如果您希望图像覆盖屏幕的整个高度，您需要将html和body标签的高度设置为100％。

html {height:100%;}
body {
    height: 100%;
    margin: 0px;
    font-family: Arial;
    font-size: 14px;
    color: #999;
    text-align: center;
    background: #975d7f url("bg.jpg") no-repeat top center;
    background-size: cover;
}

另外，我使用＆＃34;简写＆＃34;背景css属性的版本。

CSS Fit BG Image？

1 个答案: