一、背景颜色和图片
- background-color: pink; 背景颜色
- backgroundoimage: url(##.jpg); 背景图片
- background-repeat: 平铺 repeat-x横向平铺,repeat-y纵向平铺;
平铺不到的地方显示背景颜色。
<html>
<head>
<style>
div {
width: 400px;
height: 500px;
background-color: pink;
background-imgage: url(1.jpg);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
二、背景位置
background-position: 更改背景图片位置,可以写两种值:
- position包括top,center,bottom,left,right;顺序无所谓;
- length写x和y坐标,以页面左上角为0点,向右为x轴,向下为y轴;
- 实际应用的时候也可以两种混搭: 10px center;
<html>
<head>
<style>
div {
background-color: pink;
background-imgage: url(1.jpg);
background-repeat: no-repeat;
background-position: left top; /*默认左上角*/
/*如果方位名词只写一个,另一个默认center*/
background-position: 10px 30px;
/*精确单位,第一个值是x坐标,第二个值是y坐标*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
三、背景附着
设置背景内容随对象内容滚动还是固定。
- scroll; 背景内容随内容滚动
- fixed; 背景内容固定
<html>
<head>
<style>
body {
background-color: pink;
background-imgage: url(1.jpg);
background-repeat: no-repeat;
background-position: left top;
background-attachment: scroll;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
四、背景简写
background: 背景颜色 背景图片 背景平铺 背景滚动 背景位置。
<html>
<head>
<style>
body {
/*background-color: pink;
background-imgage: url(1.jpg);
background-repeat: no-repeat;
background-position: left top;
background-attachment: scroll; */
background: #000 url(#.png) no-repeat fixed center -25px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
五、背景透明
文字半透明:color: rgba(0,0,0,0.2);
背景半透明:background: rgba(0,0,0,0.3);
<html>
<head>
<style>
body {
background: #000 url(#.png) no-repeat fixed center -25px;
}
div {
height: 400px;
background: rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
六、背景缩放
background-size: 设置背景图片缩放
- 设置宽高精确单位,尽量只改一个值防止缩放失真
- 设置百分比
- cover自动缩放占满,溢出的部分会被隐藏,使用最多
- contain自动缩放,高宽有一个和背景一样大停止,保持图片完整性但是会有裸露部分
我们插入的图片img直接用width和height设置
<html>
<head>
<style>
div {
height: 400px;
background: hotpink url(#.jpg) no-repeat;
background-size: 100px;
background-size: 50%; /*缩放为原来的一半*/
background-size: cover;
background-size: contain;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
七、多背景
background: # # # #, # # #;用逗号分割设置多个背景图
- 一个元素设置多重背景图片
- 每组属性用逗号分隔
- 如果存在重叠,前面的背景图会覆盖在后面的背景图上
- 背景颜色通常定义在最后一组上
<html>
<head>
<style>
div {
height: 400px;
background: url(#.jpg) no-repeat left top ,
url(##.jpg) no-repeat left hotpink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
八、凹凸文字
<html>
<head>
<style>
body {
background-color: #ccc;
}
div {
color: #ccc;
font: 700 60px "微软雅黑";
}
div:first-child {
text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
}
div:last-child {
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}
</style>
</head>
<body>
<div>凸起的文字</div>
<div>凹下的文字</div>
</body>
</html>
九、导航栏例子
文本装饰:text-decoration
- none 无
- underline 下划线,链接默认
- overline 上划线
- line-through 删除线
<html>
<head>
<style>
a {
width: 100px;
height: 50px;
background-color: orange;
display: inline-block;
text-align: center;
line-height: 50px; /*行高等于盒子高度,文字居中*/
color: #fff;
font-size: 20px;
text-decoration: none;
}
a:hover { /*鼠标经过*/
background: url(#.png) no-repeat;
}
</style>
</head>
<body>
<a href="#">qwe</a>
<a href="#">asd</a>
</body>
</html>