一.背景属性
-属性值: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>