CSS 背景(Backgrounds)

CSS Backgrounds(背景)

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

CSS 属性定义背景效果:

• background-color

• background-image

• background-repeat

• background-attachment

• background-position

背景颜色：background-color

background-color属性可为元素设置背景色，这个属性接受任何合法的颜色值

body{
	background-color:pink;
}

效果图：

背景图片：background-image

background-image 属性描述了元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体

body{
	background-image:url("images/33.jpg");
}

效果图：

大多数背景都应用到 body 元素，不过并不仅限于此

下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景

p{
	background-image:url("images/33.jpg");
}
<p>HTML中文网</p>

效果图：

背景重复：background-repeat

属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺

水平方向上

body{
	background-image:url("images/Image 16.jpg");
	background-repeat: repeat-x;
}

效果图：

垂直方向上

body{
	background-image:url("images/Image 16.jpg");
	background-repeat: repeat-y;
}

效果图：

背景图像是否固定：background-attachment

scroll：背景图片随页面的其余部分滚动。这是默认    

fixed：背景图像是固定的    

inherit：指定background-attachment的设置应该从父元素继承    

设置图像是随页面滚动的

body{
	height: 5000px;
	background-image:url("images/Image 16.jpg");
	background-repeat: no-repeat;
	background-attachment:scroll;
}

效果图：

背景定位：background-position

可以利用 background-position 属性改变图像在背景中的位置，它有四个值分别为：left、right、top、bottom。可以通过这些值改变图像背景位置

body{
	height: 5000px;
	background-image:url("images/Image 16.jpg");
	background-repeat: no-repeat;
	background-position: right top;
}

效果图：

CSS背景属性