<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,body{
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
.img-container{
height: 100%;
background:url("../img/bg.png") no-repeat; /* X轴和Y轴方向都不重复 */
background-position: center center; /*图片的中心随着界面的变化,位置也变化*/
background-size: cover; /*背景的大小,保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小*/
}
</style>
</head>
<body>
<div class="img-container"></div>
</body>
</html>
css 图片自使用界面变化
最新推荐文章于 2024-05-22 14:34:14 发布