<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景</title>
<style>
div{
width: 300px;
height: 300px;
border: 10px solid red;
background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493309945592&di=b3051d0bce128fd8b75d9c0b9c2ee033&imgtype=0&src=http%3A%2F%2Fpic67.nipic.com%2Ffile%2F20150514%2F21036787_181947848862_2.jpg) ;
background-size: cover;
}
/*img{
width: 100%;
height: 100%;
}*/
</style>
</head>
<body>
<!--
若容器没设置宽高
容器中的内容可以把容器撑起来
但背景不会占用容器的宽高
-->
<div>
<!--<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493309945592&di=b3051d0bce128fd8b75d9c0b9c2ee033&imgtype=0&src=http%3A%2F%2Fpic67.nipic.com%2Ffile%2F20150514%2F21036787_181947848862_2.jpg" />-->
</div>
</body>
</html>
<!--
background 背景
background-color 背景色
background-image 背景图片
background-repeat 背景图片是否重复
background-position 背景位置
background-attachment 背景图片是否滚动
-->
<!--
background-position:;
传两个参数
分别代表X和Y
可以直接传参数例如
background-position:10px 10px;
也可以传关键字
X关键字有：Center，left，right//分别代表中间，左边，右边
Y关键字有：top，center，bottom//分别代表上边，中间，下边
若不传参数，则默认0px 0px或者left top
-->
<!--
background-attachment：;
scoll 背景滚动（默认属性）
fixed 背景固定
-->
<!--
背景还可以按照复合属性写法来写
-->
时间： 2024-10-25 18:49:45