CSS背景

Posted 2021-08-01 RAIN100101

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：DW

作者：🌻林小腿🌻

撰写时间：2021/7/6

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

CSS背景属性用于定义html元素的背景。

CSS属性定义背景效果：background-color 背景颜色；background-image 背景图像；background-repeat 设置背景图像在页面的水平或者垂直方向平铺与否；background-attachment 背景图像是否固定或者随着页面的其余部分滚动；background-position   背景图像定位。

1.background-color属性值可以用十六进制、英文、rgb（）,body{ background-color:yellow;},h1{background-color:#00ff00;},p{background-color:rgb(255,0,255);},上面三种写法都是可以的。

2.background-image,body{ background:image:url(‘paper.gif’); background-color:#ccccc;}，url()指向背景图像的文件路径，元素的大小包括内边距，不包含边距；默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。

属性值

值	说明
url('URL')	图像的URL
none	无图像背景会显示。这是默认
linear-gradient()	创建一个线性渐变的 "图像"(从上到下)
radial-gradient()	用径向渐变创建 "图像"。 (center to edges)
repeating-linear-gradient()	创建重复的线性渐变 "图像"。
repeating-radial-gradient()	创建重复的径向渐变 "图像"
inherit	指定背景图像应该从父元素继承

3. background-repeat 设置背景图像如何平铺

属性值

值	说明
repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	background-image不会重复
inherit	指定background-repea属性设置应该从父元素继承

4.background-position设置背景图像的定位。

5.background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

值	描述
scroll	背景图片随着页面的滚动而滚动，这是默认的。
fixed	背景图片不会随着页面的滚动而滚动。