拉伸图片覆盖整个页面的css写法
warning:
这篇文章距离上次修改已过432天,其中的内容可能已经有所变动。
要使图片完全覆盖整个页面,可以使用CSS的background-size属性,并将其设置为cover。同时,确保图片设置为背景图片,而不是作为<img>标签的一部分。以下是实现这一效果的CSS代码示例:
html, body {
height: 100%;
margin: 0;
}
body {
background-image: url('path/to/your/image.jpg');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}这段代码将确保背景图片始终覆盖整个页面,同时保持图片的宽高比,并且图片会根据页面尺寸进行相应的缩放。background-position属性确保图片从页面的中心开始覆盖,background-attachment: fixed; 确保背景图片固定,不会随着内容滚动。
评论已关闭