首页 热点专区 小学知识 中学知识 出国留学 考研考公
您的当前位置:首页正文

关于背景图片的 CSS 样式

来源:要发发知识网

有时候会遇到使用背景图还是图片的问题。

  • 背景图:固定不变的内容,需要使用div标签来包裹内容
  • 图片:img 标签的 src 属性值时后端给的。一般用于可变的(如头像),可点击的。

一般来说,使用到背景图片,会涉及到如下 CSS 样式:

  • background-image: url();/背景图的路径/
  • background-position: left top | center;/偏移位置/
  • background-size: contain | cover | width height;/背景图尺寸/
      cover:图片完全覆盖容器(图片可能溢出)。
      contain:容器包裹图片(图片可能无法完全覆盖容器)。
    background-size: 100px 80px;背景图宽度100px,高度80px
  • background-repeat: no-repeat | repeat-x | repeat-y;/背景图重复性/
  • background-attachment: fixed | scroll; 规定背景图像是否固定或者随着页面的其余部分滚动。

CSS sprite 雪碧图

显示全文