一.背景属性
-属性值:background-color(设置背景颜色)
默认背景颜色是 transparent。
-属性值:background-image(设置背景图片)
url(图片的地址)
-属性值:background-repeat(设置背景重复方式)
repeat:重复,铺满整个元素,默认值。
repeat-x:只在水平方向重复。
repeat-y:只在垂直方向重复。
no-repeat:不重复。
-属性值:background-position(设置背景图位置)
通过关键字设置位置:
写两个值,用空格隔开
水平:left、center、right
垂直: top、center、bottom
如果只写一个值,另一个方向的值取center通过长度指定坐标位置:
以元素左上角,为坐标原点,设置图片左上角的位置。 两个值,分别是x坐标和y坐标。 只写一个值,会被当做
x坐标,y坐标取center
-属性值:background(复合属性)
没有数量和顺序要求
举例:
<style>body {background-color: gray;}div {width: 400px;height: 400px;border:5px black solid;font-size: 20px;/* 设置背景颜色,默认值是transparent */background-color: skyblue;/* 设置背景图片 */background-image: url(../images/img1.jpg);/* 设置背景图片的重复方式 */background-repeat: no-repeat;/* 控制背景图片的位置——第一种写法:用关键词 */background-position: center;/* 控制背景图片的位置——第二种写法:用具体的像素值 */background-position: 100px 200px;/* 复合属性 */background: url(../images/img1.jpg) no-repeat 100px 200px;}</style>
<body><div>这是在说背景属性。</div>
</body>
二.鼠标属性
- 属性名:cursor(设置鼠标光标的样式)
pointer:小手
move:移动图标
text:文字选择器
crosshair:十字架
wait:等待
help:帮助
举例:
<style>div {cursor: pointer;font-size: 50px;}</style>
<body><div>这是在说鼠标属性。</div>
</body>