背景样式的案例

                      背景样式的案例
开发工具与关键技术:DW html和css
作者:赵纯雨     
年级:18级(5)班
撰写日期:2019年2月15日

背景支持为元素添加背景颜色和背景图片,接下里介绍背景相关的属性,
background-color:背景颜色, background-image:用于设置背景图片。注意:如果同时设置背景颜色(background-color) 和背景图片(background-image),背景颜色会被背景图片覆盖。该属性,需要使用url()函数指定图片地址,图片的地址既可以是相对的,也可以是绝对的。
background-repeat:用于设置对象的背景图片是否平铺(重复显示)。在指定该属性之前,必须先指定背景图片(background-image)该属性有repeat(纵横同时重复),no-repeat(不重复),repeat-x(x轴方向重复),repeat-y(y轴方向重复) 4个值。
background-position:用于控制背景图片的位置。background-position有5个关键字值分别是:top,left,bottom,right,center。可以通过任意两个关键字组合来定位。 也可以通过百分比来定位。例如:background-position:50% 50%.
background:这是一个复合属性,可以同时设置背景颜色、背景图片、背景重复、背景位置等。
CSS3还可以给元素背景添加多个背景图片。
如下图所示:
在这里插入图片描述
在这里插入图片描述

效果图如下:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44540773/article/details/88941491