制作全背景

原创于 2016-08-10 04:27:12 发布 · 332 阅读

CC 4.0 BY-SA版权

本文介绍了一种使用CSS设置背景图片，并根据不同屏幕尺寸进行自适应的方法。通过媒体查询实现不同分辨率下的背景尺寸调整，确保图片展示效果。文章强调了在特定分辨率下保持图片质量的重要性。

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
background: #000 url(http://p6.qhimg.com/t0123fede0a5c219b8b.png) center center fixed no-repeat;
-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
/*1024 X 768*/
@media only all and (max-width: 1024px) and (max-height: 768px){
body{
-moz-background-size:1024px 768px;
-webkit-background-size:1024px 768px;
-o-background-size:1024px 768px;
background-size:1024px 768px;
}
}
@media only all and (max-width: 640px) and (max-height: 480px) {
body{
-moz-background-size:640px 480px;
-webkit-background-size:640px 480px;
-o-background-size:640px 480px;
background-size:640px 480px;
}
}
</style>
</head>
<body>
<p>不要试验哦！！小心图片失真！！！</p>
</body>
</html>