6、背景

背景


<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>
		
	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轴其中的一个方向 不一定铺满 但是可以看到整个图片

你可能感兴趣的:(HTML基础)