时间戳

首页 > 解决方案 > CSS 适合 BG 图像？

html - CSS 适合 BG 图像？

问题描述

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

在此处输入图像描述

图 A：我需要我的背景图像全屏显示（自定义大小适合）。图 B：我还需要我的背景图像适合垂直分辨率，并且在我调整浏览器窗口等时将地平线居中。

我有谷歌到地狱然后回来......没有好的解决方案？是否有可能做到这一点？还是我对 css/html5 要求太多了

好的，这是我的代码：如果你想看看下面的图片... 在此处输入图片描述

<!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>

标签： htmlcsspositionbackground-imageimage-resizing

解决方案

不是 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;
}

另外，我使用了背景 css 属性的“速记”版本。

推荐阅读