免费教程
默认情况下背景图像会从元素内容的左上角开始(若有内边距则从元素内边距区域的左上角开始),在水平和垂直方向上重复背景图像以填充整个元素区域(不包括元素的外边距区域)
Web前端教程
Web前端入门教程:CSS 背景设置(2)
来源:易牛云朗沃
  |  
发布时间:2021-10-08 21:36
  |  
关键词:Web前端开发
  |  
阅读量:

3. background-repeat

默认情况下背景图像会从元素内容的左上角开始(若有内边距则从元素内边距区域的左上角开始),在水平和垂直方向上重复背景图像以填充整个元素区域(不包括元素的外边距区域),您可以使用 background-repeat 属性用来设置背景图像是否重复或如何重复,该属性的可选值如下:

Web前端开发

【示例】使用 background-repeat 属性让背景图像只在水平方向上重复:

Web前端开发

运行结果如下图所示:

Web前端开发

4. background-position

background-position 属性用来设置背景图像的起始位置,该属性的可选值如下:

Web前端开发

【示例】使用 background-position 属性来设置背景图像的位置:

Web前端开发

运行结果如下图所示:

Web前端开发

5. background-attachment

background-attachment 属性用来设置背景图像是固定在某个位置还是跟随页面一起滚动,该属性的可选值如下:

Web前端开发

【示例】使用 background-attachment 属性将背景图像固定在屏幕的顶部:

Web前端开发

运行结果如下图所示:

Web前端开发

6. background-size

background-size 属性用来设置背景图像的尺寸,该属性的可选值如下:

Web前端开发

【示例】使用 background-size 属性设置背景图像的尺寸,并将背景图像横向铺满整个元素区域:

Web前端开发

运行结果如下图所示:

Web前端开发

点击知道更多编程知识

文章来源于网络