CSS3背景属性的用法介绍

这篇文章主要介绍“CSS3背景属性的用法介绍”，在日常操作中，相信很多人在CSS3背景属性的用法介绍问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS3背景属性的用法介绍”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

本文介绍关于背景（background）的新增属性和渐变函数（gradient），看看提供了哪些新背景元素控制和多种渐变效果的实现。

背景Background

1、background是多个背景属性的简写。

backgrounf: [background-color] | [background-image] |
    [background-position][/background-size] | [background-repeat] |
[background-attachment] | [background-clip] | [background-origin], ...;

注意： 如果有 background-size 值，需要紧跟 background-position 并且用 "/" 隔开；

background-image

2、background-image属性可以添加多张背景图片。

不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。设置多张png图片，可以出多张背景图叠加的效果。

background-image: url("../../media/examples/lizard.png"),
 
  url("../../media/examples/star.png");

建议： 使用背景图片的时候，最好也设置背景颜色（background-color），作为背景图片不支持时的 planB。

background-size

CSS3 以前，背景图像大小由图像的实际大小决定。

3、background-size属性可以指定背景图像的大小，取值像素或百分比。

（相对于父元素的宽度和高度的百分比的大小）。

图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸：

cover：保持图像的宽高比例，缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。

contain：保持图像的宽高比例，缩放背景图片以完全装入背景区，可能背景区部分空白。

一个值：这个值指定图片的宽度，图片的高度隐式的为 auto

两个值：第一个值指定图片的宽度，第二个值指定图片的高度

background-origin

background-origin规定了指定背景图片属性的原点位置的背景相对区域。

注意： 当使用 background-attachment 为 fixed 时，该属性将被忽略不起作用。

到此，关于“CSS3背景属性的用法介绍”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！