**背景:它支持为元素添加背景颜色和背景图片。**
(作者:小雨妖妖 撰写时间:2019.1.18 开发工具与关键技术:DW/CSS中的Backgound)
接下来介绍下背景相关的属性(理论知识)
(1)Background-color:背景颜色
(2)Background-image:用于设置背景图片。
注意:如果同时设置背景颜色(background-color)和背景图片(background-image),
背景颜色会被背景图片覆盖。
该属性需要用URL()含数指定图片地址,图片的地址既可以是相对的也可以是绝对的。
(3)Background-repeat:用于设置对象的背景图片是否平铺(重复显示).在指定该属性之前, 必须先指定背景图片(background-image)。
该属性有4个值:
repeat(纵横同时重复),
no-repeat(不重复),
repeat-x(x轴方向重复),
repeat-y(y轴方向重复)
(4)Background-position:用于控制图片的位置。
Background-position有5个关键值分别是:top、left、botton、right、center。
可以通过任意两个关键字组合来定位 也可以通过百分比来定位。
例如:background-position:50% 50%。
第一个百分比对应横坐标,第二个百分比对应纵坐标。
(5)Background-attachment:设置背景图片是随对象内容滚动还是固定。
在指定该属性之前,必须先指定背景图片。
该属性两个值:scroll(默认) fixed(固定)。
(6)Background:这是一个复合属性,可以同时设置背景颜色,背景图片,背景重复,背景位置等。
现在呢 我们就来 实操一下
以下的代码呢就是整个过程
1.首先我们来创建一个HTML,给它title直接在html里写style样式
注: <style type="text/css"></style>此样式呢就是来引用CSS样式的
2.其次呢,我们就给它两个类(one 和 two)两个盒子
*这里涉及到一点点的边框样式,这样效果更美观一些*
3.重点来了:
(1) backgound-repeat-x:repeat-x(x轴方向重复)这样图片就看到倒影两面!
(2) backgound-position:center(控制图片的位置:在盒子的中心)
(3) backgound-attachment:fixed(背景图是固定的)这样就相对于第一张照片它是固定的
第一张图片就很明显看到了倒影两面
这里就盒子过大导致照片呈现出四张照片的效果
这样的效果其实也是一种另类的美哦
《完》