背景颜色图片和平铺
使用background-color设置背景图片,通过background-img设置背景图片
background-repeat表示平铺,其值no-repeat表示不平铺,repeat-x表示水平平铺,repeat-y表示纵向平铺
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 设置背景颜色 */
.color{
width:100px;
height: 100px;
background-color: aqua;
}
/* 设置背景图片 */
.img{
width:600px;
height: 500px;
background-color: aqua;
background-image: url(img/t1.jpg);
/* 水平平铺,图片没有覆盖到的地方露出背景颜色 */
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div class='color'></div>
<div class="img"></div>
</body>
</html>
效果:
背景位置
通过background-position控制背景图片位置,可以通过方位名词(right,left,top,bottom center)控制背景图片位置,如果方位名词只写一个,另外一个默认为center.也可以使用坐标来定位,注意,左上角为(0,0),并且定义时,第一个值为x,第二个值为y。也可以两种方式混合使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.img{
width:900px;
height: 500px;
background-color: aqua;
background-image: url(img/t1.jpg);
background-repeat: no-repeat;
/* 使用方位名词定义背景图片位置 放于左上角*/
/* background-position: left top; */
/* 使用坐标定位 */
/* background-position:10px 20px */
/* 混合使用两种方式 */
/* 放在水平上离左边10px,垂直上居中 */
background-position: 10px,center;
}
</style>
</head>
<body>
<div class="img"></div>
</body>
</html>
效果:
背景附着
设定背景图片是固定还是随着页面滚动
通过设置background-attachment设置,值为scroll表示滚动,为fixed表示固定
背景简写
格式:background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
背景半透明
CSS3新特性
类似文字半透明,使用background:rgba(r,g,b,a),a的值在0-1之间,越小越透明
背景缩放
CSS3新特性
使用background-size设置图片尺寸,对于其参数,可以设置长度单位或百分比(设置百分比时参照的是盒子的宽高)
将参数设置为cover时,会自动调整缩放比例,保证图片始终填满背景区域,如有溢出部分,则会被隐藏
将参数设置为contain会自动调整缩放比例,保证图片始终完整显示在背景区域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
height: 300px;
width: 500px;
background-color: #00FFFF;
background-image: url(img/t1.jpg);
background-repeat: no-repeat;
/* 设置背景图片尺寸宽200px*/
/* background-size: 200px; */
/* 通过百分比修改背景图片宽为盒子宽的一半 */
/* background-size: 50%; */
/* 保证图片始终完整显示在背景区域 */
/* background-size: contain; */
/* 保证图片始终填满背景区域 */
/* background-size: cover; */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
多背景图片
CSS3新特性
方法:用逗号分隔。
一个元素可以设置多重背景图像,每组属性之间用逗号分隔,如果设置的多重背景图之间存在交集,前面的背景图会覆盖在后面的背景图之上。同时为了避免背景色将图像覆盖,背景色通常定义在最后一组上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
height: 300px;
width: 500px;
background: url(img/i1.jpg) no-repeat scroll left top,
url(img/i2.jpg) no-repeat right bottom pink
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果:
凹凸文字效果
可以通过设置文字颜色和背景颜色一样,然后设置文字阴影,最后得到凸出和凹陷的文字效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background-color: #ccc;
}
div{
color: #ccc;
font: 700 80px "microsoft yahei";
}
/* 利用文字阴影实现凸起文字 */
.tu{
text-shadow: 1px 1px 1px #000,
-1px -1px 1px #fff;
}
/* 利用文字阴影实现凹下文字 */
.ao{
text-shadow: -1px -1px 1px #000,
1px 1px 1px #fff;
}
</style>
</head>
<body>
<div class="tu">我是突出文字</div>
<div class="ao">我是凹陷文字</div>
</body>
</html>
效果