平铺不到的地方显示背景颜色。
<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: 更改背景图片位置,可以写两种值:
<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>
设置背景内容随对象内容滚动还是固定。
<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: 设置背景图片缩放
我们插入的图片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
<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="#">qwea>
<a href="#">asda>
body>
html>