背景属性深入理解
【摘要】 1.背景类常用属性应用background-color 背景颜色设置或检索对象的背景颜色，默认值：transparent；同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之上;CSS中，颜色值通常以以下方式定义:十六进制 - 如："#ff0000"RGB - 如："rgb(255,0,0)"颜色名称 - 如："red"background-image 背景图片设置或检索对象的背景图像...
1.背景类常用属性应用
background-color 背景颜色
设置或检索对象的背景颜色，默认值：transparent；
-
同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之上;
-
CSS中，颜色值通常以以下方式定义:
-
十六进制 - 如："#ff0000"
-
RGB - 如："rgb(255,0,0)"
-
颜色名称 - 如："red"
background-image 背景图片
设置或检索对象的背景图像，默认值：none；
-
如果设置了 <' background-image'>，同时也建议设置 <'background-color'> 用于当背景图像不可见时保持与文本颜色有一定的对比度。
-
如果定义了多组背景图，且背景图之间有重叠，写在前面的将会盖在写在后面的图像之上。
background-repeat 背景平铺
设置或检索对象的背景图像如何铺排填充。必须先指定 <' background-image'> 属性。默认值：repeat；
-
允许提供2个参数，如果提供全部2个参数，第1个用于横向，第二个用于纵向；
-
repeat-x： 背景图像在横向上平铺
-
repeat-y： 背景图像在纵向上平铺
-
repeat： 背景图像在横向和纵向平铺
-
no-repeat: 背景图像不平铺
background-attachment 背景是否滚动的设置
设置或检索背景图像是随对象内容滚动还是固定的。必须先指定 <'background-image'> 属性。默认值：scroll
-
fixed： 背景图像相对于窗体固定。
-
scroll： 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
background-position 背景定位
设置或检索对象的背景图像位置。必须先指定 <" background-image"> 属性。 该属性提供2个参数值；
-
如果提供两个，第一个用于横坐标，第二个用于纵坐标；
-
如果只提供一个，该值将用于横坐标；纵坐标将默认为50%（即center）
-
percentage：用百分比指定背景图像填充的位置。可以为负值；
-
length： 用长度值指定背景图像填充的位置。可以为负值；
-
center： 背景图像横向和纵向居中；
-
left： 背景图像在横向上填充从左边开始；
-
right： 背景图像在横向上填充从右边开始；
-
top： 背景图像在纵向上填充从顶部开始；
-
bottom: 背景图像在纵向上填充从底部开始；
2.炫酷动画之变换 transform
transform变换之translate位移
-
translate()： 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
-
translateX()： 定对象X轴（水平方向）的平移
-
translateY()：指定对象Y轴（垂直方向）的平移
transform变换之rotate旋转
-
rotate()： 指定对象的2D rotation（2D旋转），需先有 <’ transform-origin ‘> 属性的定义；表示旋转一定的角度；
-
rotate() = rotate(angle)
-
rotate3d() = rotate3d(number,number,number,angle)
-
rotateX() = rotatex(angle)
-
rotateY() = rotatey(angle)
-
rotateZ() = rotatez(angle)
transfrom变换之scale缩放
-
scale()：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值；
-
scaleX()：指定对象X轴的（水平方向）缩放；
-
scaleY()：指定对象Y轴的（垂直方向）缩放；
transform-origin元素变换基点
-
设置或检索对象以某个原点进行转换。
-
该属性提供2个参数值。
-
如果提供两个，第一个用于横坐标，第二个用于纵坐标。
-
如果只提供一个，该值将用于横坐标；纵坐标将默认为50%;
-
默认值：50% 50%，效果等同于center center
-
percentage： 用百分比指定坐标值。可以为负值。
-
lenght： 用长度值指定坐标值。可以为负值。
-
left： 指定原点的横坐标为left
-
center①： 指定原点的横坐标为center
-
right： 指定原点的横坐标为right
-
top： 指定原点的纵坐标为top
-
center②： 指定原点的纵坐标为center
-
bottom： 指定原点的纵坐标为bottom
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）