css背景图片100%填充

6

国瑞前端:在实际前端开发中,我们有时候就需要用到背景图百分百填充区域,在以往的做法中,我们如果宽度百分百,高度auto,我们就会发现有时候高度会有问题,这个时候我们就可以使用一下背…

国瑞前端:在实际前端开发中,我们有时候就需要用到背景图百分百填充区域,在以往的做法中,我们如果宽度百分百,高度auto,我们就会发现有时候高度会有问题,这个时候我们就可以使用一下背景的一些属性

css背景图片100%填充- background-size: cover;的使用

1
2
3
4
5
6
7
8
9
10
html{
  height: 100%;
}
body{
  width: 100%;
  height: 100%;
  background: url("http://www.huanggr.cn/wp-content/uploads/2018/08/u17391372993469609344fm26gp0-220x150.jpg") center center no-repeat;
  background-attachment: fixed;   //固定背景图片
  background-size: cover;    
}

作者: huanggr

为您推荐

7

发表评论

电子邮件地址不会被公开。 必填项已用*标注