当前位置: 开发笔记 > 编程语言 > 正文

CSS3background-image背景图片相关介绍

作者：独坤2602884605 | 来源：互联网 | 2023-05-18 04:17

CSS3background-image背景图片相关介绍这里将会介绍如何通过background-image设置背景图片，以及背景图片的平铺、拉伸、偏移、设置大小等操作。

CSS3 background-image背景图片相关介绍

这里将会介绍如何通过background-image设置背景图片，以及背景图片的平铺、拉伸、偏移、设置大小等操作。

1. 背景图片样式分类

CSS中设置元素背景图片及其背景图片样式的属性主要以下几个：

background-image ：设置元素的背景图片。

background-repeat ：设置如何平铺背景图片。

background-attachment ：设置背景图片是否固定或随着滚动移动。

background-position ：设置背景图片的位置。

background-size ：设置背景图片的大小。

下面将详细说明各属性。

2. background-image ：设置元素的背景图片

说明：可设置元素的1个或多个背景图片。

语法： [ , ]* | none

默认值：none。 // 不设置元素的背景图片。

扩展：W3C规范、MDN资料

2.1 设置单个背景图片

说明：默认情况下背景图片进行横向和纵向平铺。

 
          background-image 
          : 
          url 
          ( 
          'res/bgA.jpg' 
          )

2.2 设置多个背景图片

说明：渲染时前面的背景图片在上层、后面的背景图片在下层。

 
          background-image 
          : 
          url 
          ( 
          'res/bgA.jpg' 
          ), 
          url 
          ( 
          'res/bgB.jpg' 
          ); 
         
          background-repeat 
          : 
          no-repeat 
          ;

3. background-repeat ：设置背景图片的平铺效果

说明：设置背景图片的平铺效果，包括水平、垂直。

语法： [ , ]*

 = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

默认值：repeat //水平和垂直平铺

扩展：W3C规范、MDN资料

3.1 background-repeat:repeat-x | repeat-y | repeat-x | repeat-y

说明：设定背景图片水平、垂直平铺。

示例：

 
          background-repeat 
          : 
          repeat-x 
          ;  
          /* 表示水平平铺 */ 
         
          background-repeat 
          : 
          repeat-y 
          ;  
          /* 表示垂直平铺 */ 
         
          background-repeat 
          : 
          repeat-x 
          repeat-y 
          ;  
          /* 水平和垂直平铺(默认) */

3.2 background-repeat:space | round | no-repeat

说明：设置背景图片的其他平铺效果。

示例：

 
          background-repeat 
          :space;  
          /* 均匀的平铺背景图片，不会被裁剪 */ 
         
          background-repeat 
          :round;  
          /* 水平和垂直平铺背景图片，拉伸图片以尽可能的填充背景，不会被裁剪 */ 
         
          background-repeat 
          : 
          no-repeat 
          ;  
          /* 不进行平铺 */

4. background-attachment ：设置背景图片是否固定或随着滚动移动

说明：设置背景图片是否固定或随着滚动移动。

语法： [ , ]*

 = scroll | fixed | local

默认值：scroll // 背景图片跟随滚动条一直滚动

扩展：W3C规范、MDN资料

 
          background-attachment 
          : 
          scroll 
          ;  
          /* 跟随滚动条一起滚动。(默认) */ 
         
          background-attachment 
          : 
          fixed 
          ;  
          /* 背景图片固定位置，不随着滚动条滚动 */ 
         
          background-attachment 
          : 
          local 
          ;  
          /* 跟随内容一起滚动 */

4.1 background-attachment:scroll; // 跟随滚动条一直滚动。(默认)

4.2 background-attachment:local; // 跟随内容一起滚动

5. background-position ：设置背景图片的位置

说明：设置背景图片的位置，可设置背景图片的4个边角水平和纵向的起始位置。

语法： [ , ]*

默认值：0% 0% // 背景图片左上角定位于容器左上角

扩展：W3C规范、MDN资料

5.1 background-position:10px; // 背景图片水平方向与左边缘相距10px，垂直居中

5.2 background-position:10px 20px; // 背景图片水平方向与左边缘相距0px，垂直方向与顶部边缘相距20px

5.3 background-position:left 10px bottom 20px; // 背景图片水平方向与左边缘相距10px，垂直方向与底部边缘相距20px

6. background-size ：设置背景图片的大小

说明：设置背景图片的大小。

语法： [ , ]*

 = [  |  | auto ]{1,2} | cover | contain

默认值：auto auto // 背景图片的原始大小

扩展：W3C规范、MDN资料

示例：

 
          background- 
          size 
          : 
          100px 
          ;  
          /* 背景图片宽度为100px，高度为auto */ 
         
          background- 
          size 
          : 
          100px 
          50% 
          ;  
          /* 背景图片宽度为100px，高度为容器高度的50% */ 
         
          background- 
          size 
          : 
          100% 
          100% 
          ;  
          /* 背景图片宽度为容器宽度的100%，高度为容器高度的100% */

7. 在线示例

地址：http://www.akmsg.com/WebDemo/CSS3-background-image.html

==================================系列文章==========================================

本篇文章：8.2 CSS3 background-image背景图片相关介绍

Web开发之路系列文章

1.HTML

　　1.1 HTML页面源代码布局介绍

　　1.2 HTML基础控件介绍

　　1.3 iframe 和 frameset 的区别

　　1.4 name、id、class 的区别

　　1.5 table、form表单标签的介绍以及get和post提交方式

　　1.6 HTML kbd键盘元素

2.CSS 层叠样式表

　　2.1 CSS 选择器及各样式引用方式

　　2.2 CSS HTML元素布局及Display属性

　　2.3 CSS Float 浮动属性

　　2.4 CSS Position 定位属性

3.Javascript介绍

　　3.1 Javascript var关键字、变量的状态、异常处理、命名规范等介绍

　　3.2 Javascript function函数种类

　　3.3 Javascript Array对象

　　3.4 Javascript Date对象

　　3.5 Javascript Math和Number对象

　　3.6 Javascript String对象

　　3.7 Javascript Object对象

　　3.8 Javascript 自定义对象

　　3.9 Javascript 对象属性介绍

　　3.10 Javascript 开发规范

4.BOM

　　4.1 HTML BOM Browser对象

　　4.2 HTML 获取屏幕、浏览器、页面的高度宽度

　　4.3 HTML URL地址解析

5.DOM

　　5.1 HTML DOM 介绍

　　5.2 HTML DOM 对象

　　5.3 HTML 事件(一) 事件的介绍

　　5.4 HTML 事件(二) 事件的注册与注销

　　5.5 HTML 事件(三) 事件流与事件委托

　　5.6 HTML 事件(四) 模拟事件操作

6.HTML5

　　6.1 HTML5 介绍

　 6.2 HTML5 语义元素(一)页面结构

　 6.3 HTML5 语义元素(二)文本内容

　　6.4 HTML5 input元素新的特性

　　6.5 HTML5 progress和meter控件

　　6.6 HTML5 sessionStorage会话存储

　　6.7 HTML5 localStorage本地存储

7.ExtJS 4.2

　　7.1 ExtJS 4.2 介绍

　　7.2 ExtJS 4.2 第一个程序

　　7.3 ExtJS 4.2 组件介绍

　　7.4 ExtJS 4.2 组件的查找方式

　　7.5 ExtJS 4.2 业务开发(一)主页搭建

　　7.6 ExtJS 4.2 业务开发(二)数据展示和查询

　　7.7 ExtJS 4.2 业务开发(三)数据添加和修改

　　7.8 ExtJS 4.2 Grid组件的单元格合并

　　7.9 ExtJS 4.2 Date组件扩展：添加清除按钮

　　7.10 ExtJS 4.2 评分组件

8.CSS 3

　　8.1 CSS3 border-radius边框圆角

　　8.2 CSS3 background-image背景图片相关介绍

只是记录了自己在学习、使用Web前端内容时的心得和碰到的问题。

参考文献：

1）http://www.w3school.com.cn/

2）《Javascript权威指南(第六版)》

分类: CSS3

转载：https://i.cnblogs.com/EditPosts.aspx?opt=1

CSS3background-image背景图片相关介绍

2.1 设置单个背景图片

2.2 设置多个背景图片

3.1 background-repeat:repeat-x | repeat-y | repeat-x | repeat-y

3.2 background-repeat:space | round | no-repeat

4.1 background-attachment:scroll; // 跟随滚动条一直滚动。(默认)

4.2 background-attachment:local; // 跟随内容一起滚动

5.1 background-position:10px; // 背景图片水平方向与左边缘相距10px，垂直居中

5.2 background-position:10px 20px; // 背景图片水平方向与左边缘相距0px，垂直方向与顶部边缘相距20px

5.3 background-position:left 10px bottom 20px; // 背景图片水平方向与左边缘相距10px，垂直方向与底部边缘相距20px

秒建一个后台管理系统？用这5个开源免费的Java项目就够了

JavaWeb文件上传：前端实现与后端处理详解

技术分享：使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统

Spring – Bean Life Cycle

Spring Boot 中配置全局文件上传路径并实现文件上传功能

网站访问全流程解析

探讨HTTP隧道技术在RDP暴力破解中的应用

开机自启动的几种方式

本地存储组件实现对IE低版本浏览器的兼容性支持

利用 Node.js 和 Express（4.x 及以上版本）构建高效文件上传功能

在PHP中如何正确调用JavaScript变量及定义PHP变量的方法详解

DVWA学习笔记系列：深入理解CSRF攻击机制

SpringMVC 入门指南：快速上手 Java Web 开发

oracle c3p0 dword 60,web_day10 dbcp c3p0 dbutils

MySQL Decimal 类型的最大值解析及其在数据处理中的应用艺术