<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type='text/css'>
.box{
width:600px;
height:500px;
font-size:20px;
color:#fff;
/*
*
font:倾斜 加粗 大小/行高 字体;
font-weight:加粗;
*/
/*
background:red;背景
*/
background-color:red;/*背景颜色*/
background-image:url("img/3.jpg");/*背景图片*/
background-repeat:no-repeat;/*背景图是否平铺*/
background-repeat:repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
background-repeat:no-repeat;
background-position:left top;/*默认值*/
background-position:left center;
background-position:left bottom;
background-position:center top;
background-position:center;
background-position:center bottom;
background-position:right top;
background-position:right center;
background-position:right bottom;
}
</style>
</head>
<body>
<!--
background-color:背景颜色;
颜色单词 red blue green....
十六进制值 # 0-9 a-f
三原色值 rgb(0,0,0) 0-255
background-image:url("图片地址");
背景图默认平铺
画了一幅画
img 挂了一幅画 遮挡背景
background-repeat:图片是否重复;
repeat 重铺(默认值)
no-repeat 不重铺
repeat-x 水平重铺
repeat-y 垂直重铺
background-position:背景定位;
关键字写法
水平值 left center right
垂直值 top center bottom
-->
<div class="box">测试
<!--<img src="img/2.jpg" />-->
</div>
</body>
</html>
CSS背景属性
最新推荐文章于 2024-09-29 21:43:16 发布