李涛自留地
回到顶部
首页 > 前端 > CSS3中background属性有哪些？background用法解析

CSS3中background属性有哪些？background用法解析

文章目录

background是前端Css中的一个重要的元素，它可以在一个声明中设置所有的背景属性，也是在Css中使用频率比较高的元素之一，因为网站的页面需要考虑网站类型、视觉、护眼等各方面因素对网站背景进行合理科学的设置，本文将和大家一起来学习和分享在Css3中background的属性有哪些以及background用法解析。

Css3中background的属性有哪些？

background其实是对背景设置的一种总的写法，其中包含了background-color、background-image、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment这些属性，下面的Css3中background的属性及作用表格将background的属性的作用一一解释给大家。

Css3中background的属性及作用表格

background的属性值 作用
background-color 背景颜色
background-image 背景图片
background-position 背景图片位置
background-size 规定背景图片的尺寸
background-repeat 如何重复背景图像
background-origin 规定背景图片的定位区域
background-clip 规定背景的绘制区域
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动

Css3中background的简写

Css3中background的简写属性顺序为：background-color,background-image,background-repeat,background-attachment,background-position,background-size，当然如果你缺少一个属性值或者没有某个属性也不会报错。

例如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css中背景属性的用法</title>
    <style type="text/css">
        body {
            background: #f5f5f5 url(img/10.jpg) no-repeat fixed center;
        }
    </style>
</head>

<body>
    随便打点文字
</body>

</html>

我设置了body的背景，背景颜色为#f5f5f5浅灰色的背景，背景图片为img目录下10.jpg图片，不平铺背景图片，当页面的其余部分滚动时，背景图像不会移动，图片位置设置在中间。

把以上例子在浏览器中打开后显示截图如下：

CSS3中background属性有哪些？background用法解析

当然在日常的前端工作中我们也可以将background的属性值分开写，但是简写会使得我们的代码更加的简洁，所以需要使用背景美化页面的时候，提倡使用简写的方式写背景代码。

以上就简单的学习和记载了Css3中background的属性有哪些以及background用法解析，其实在这些background的属性中还有很多内置的属性，当然现在很多前端页面只需简单设置一些背景颜色，太复杂的背景设置看上去就显得网站页面有些花哨了，后续本站将继续记载更多关于前端中Css的文章。

若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。