CSS3 背景图像

CSS3 背景图像

图像不止传递信息，也可以用来装饰页面。--------------------------------------------------------------->
<------------------------------------------------------CSS 提供多个 background 子属性来实现这个目标 。

1. 定义背景图像 😃

使用 background-image： none | < url >

默认值是 none ；< url >表示使用绝对或对地址指定背景图像。

使用 background 能控制背景的显示方式，用法如下：

repeat-x： 横向上平铺。 repeat-y：横向下平铺。 repeat: 横向和纵向平铺。

s

pace: 以相同的间距平铺且填充完整容器或某个方向
round：自动缩放知道适应且填充满整个容器；
no-repeat： 不平铺

实例设计：

本例设计了一个公司公告栏，其中宽度固定，高度根据正文进行动态调整，为适应设计需求，利用背景图像垂直平铺.

代码如下：

2.控制大小

使用 background-size 可以控制背景图像的大小用法如下：

<length>: /*长度值 不可为负值
<percentage> 取值为0￥~100%
cover 保持宽高比 将图片缩放到正好完全覆盖背景区域
contain 保持高宽比 将图片缩放到宽度或高度正好适应的背景区域。

实例设计：

本例利用 css3 背景图像功能

代码如下：

3.设计固定背景

代码如下：

完结！

评测：

• 😊有帮助
• 😶懵
• 😒无用
  
  作者：在校生记录博客！