【CSS背景图片页面自适应充满屏幕】

CSS背景图片页面自适应充满屏幕


实现代码:

body {

        overflow: hidden;

        position: fixed;

        width:100%;

        height:100%;

        background: url("image.png") no-repeat;

        background-size:cover;

}


扩展:

background-size的属性:

background-size: auto || <length> || <percentage> || cover || contain

取值说明:

1、auto:此值为默认值,保持背景图片的原始高度和宽度;

2、<length>此值设置具体的值,可以改变背景图片的大小;

3、<percentage>此值为百分值,可以是0%〜100%之间任何值,但此值只能应用在块元素上,所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。

4、cover:此值是将图片放大,以适合铺满整个容器,这个主要运用在,当图片小于容器时,又无法使用background-repeat来实现时,我们就可以采用cover;将背景图片放大到适合容器的大小,但这种方法会使用背景图片失真;

5、contain:此值刚好与cover相反,其主要是将背景图片缩小,以适合铺满整个容器,这个主要运用在,当背景图片大于元素容器时,而又需要将背景图片全部显示出来,此时我们就可以使用contain将图片缩小到适合容器大小为止,这种方法同样会使用图片失真。

附:当background-size取值为<length>和<percentage>时可以设置两个值,也可以设置一个值,当只取一个值时,第二个值相当于auto,但这里的auto并不会使背景图片的高度保持自己原始高度,而会与第一个值相同。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,782评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,831评论 0 11
  • 1.CSS简介 Cascading Style Sheet 层叠样式表 主要用来定义页面中的表现,HTML 描述页...
    hyt222阅读 4,353评论 0 0
  • 一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用? CSS Sprite把多个背景图片合成为一张,通...
    dengpan阅读 2,773评论 0 0
  • 假设我们有一个两栏自适应的布局,在主内容中应用了一个图片,其结构如下: 这是一个很常见的结构,其效果就是一张图片,...
    抱着熊喵啃什么阅读 9,259评论 0 4