<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图片</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#box{
width:1000px;
height: 600px;
border: 6px dotted red;
/*1、设置背景图片的路径*/
background-image: url(img/不说谎大图.jpg);
/*2、是否平铺
如果图片没有标签的尺寸大 默认平铺整个标签*/
margin: 50px auto;
background:url(img/不说谎大图.jpg) no-repeat 20% 50% seagreen;
/*background-repeat:repeat-x;*/
/*space 会按照尺寸选择性平铺 但是会流出缝隙 看空间大小 能放得下就放
repeat-x: 横向平铺（竖直方向不平铺）
repeat-y:纵向平铺（横着方向不平铺）
round 环绕 但是会压缩图片尺寸 不推荐*/
/*background-repeat: no-repeat;*/
/*3、背景裁剪
*/
/*background-clip:
* border-box 默认值 ，从边框位置往外的部分裁剪掉
* padding-box 从padding位置开始往外的部分裁剪掉
* content-box 从内容位置开始往外部分裁剪掉*/
/*background-clip: content-box;*/
/*4、背景图片的位置
方位词可用： left top center right bottom
百分数值可用 20% 50%
第一个值表示X轴（横向） 第二个值是Y值（纵向）*/
/*background-position: center center;*/
/*5、背景图片的尺寸 size
可以 px数值
也可以 百分比数值 参考对应标签的宽高
cover
contain
cover和contain都是按比例缩放图片
cover会保证按比例充满整个标签 所有有可能会造成图片不能完整展示
contain只要宽和高一个方向铺满容器，就会停止缩放 有可能造成标签背景留白
*/
/*background-size: contain;*/
/*综合写法：
* background:url(img/不说谎大图.jpg) no-repeat center seagreen
*/
/*background:url(img/不说谎大图.jpg) no-repeat 20% 50% seagreen;*/
}
</style>
</head>
<body>
<div id="box">
啥借口带手机的还是看得见开幕式在辽阔的萨满
</div>
</body>
</html>
网友评论