小小招数之CSS背景图全屏布局

elephant230

于 2019-04-15 15:49:31 发布

阅读量180

点赞数

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/elephant230/article/details/89313434

版权

本文介绍了一种使用CSS实现全屏图片展示页面的方法。通过设置section元素的绝对定位和背景图片的cover属性，可以创建一个美观且响应式的全屏图片展示效果。此技巧适用于前端开发，特别是网页设计和响应式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录一个小招数,

做个全屏展示图片的页面.

<section class="welcome"></section>

CSS采取absolute定位,四个方位均为0,背景图的background-size为cover

代码如下:

.welcome{
  width:100%;
  position: absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  background-image: url('../assets/pic.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}