<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景</title>
<style type="text/css">
div{
width:500px;
height:500px;
border:1px solid red;
background-color:skyblue;
background-image:url('img/0.jpg');
background-repeat:no-repeat; /*图片不平铺*/
background-size:200px 200px; /*宽高*/
background-size:cover; /*铺满*/
background-size:contain; /*x-y等比例缩放铺满*/
background-size:200px 200px;
background-position:center; /* 默认x-y 写一个，另一个默认居中*/
background: yellow url('img/0.jpg') no-repeat center/center; /*复合属性*/
}
</style>
</head>
<body>
<div>
<!-- <img src="img/0.jpg" alt='' width='400px'> -->
</div>
</body>
</html>
background-color 背景色
background-image 背景图片
background-repeat 背景平铺
repeat 平铺 默认
repeat-x 平铺x
repeat-y 平铺y
np-repeat 不平铺
注意：只有背景图片的宽高小于被设置的元素的宽高，才会有平铺效果
background-position 背景位置 x轴 y轴
x轴 left center right
y轴 top center bottom
如果只给一个值，默认在x轴，y轴默认center(50%)
% px
background-size 背景大小
% px
给一个值的时候，默认x轴，y轴默认auto auto会等比缩放
cover 等比例缩放直到铺满x,y轴 可以铺满整个框 但是不一定能看到完整的图片
contain 等比例缩放x轴或者y轴其中的一个方向 不一定铺满 但是可以看到整个图片
网友评论