拉伸图片覆盖整个页面的css写法
要使图片完全覆盖整个页面,可以使用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;
确保背景图片固定,不会随着内容滚动。
评论已关闭