CSS 背景相关属性
2019-08-07 本文已影响0人
氢金
重要代码
background （背景）
background-image：（背景图片）url（"./文件夹/二级文件夹/图片.jpg"）
background-repeat:no-repeat;(背景不重复/)
background-position:10px 20px (设置背景图片的位置)
下面是
1.完整复杂写法
2.简约写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景相关属的（完整复杂写法+简约写法）</title>
<style type="text/css">
.wanzheng{
/* 设置div 的宽度，长度*/
width:400px;
height:400px;
/* 设置边框为4px大小，solid固体，红色 */
border:4px solid red;
/* 设置背景图片位置 */
background-image:url("./images/1.png");
/* 设置背景颜色为蓝色 */
background-color:blue;
/* 设置背景图片是否重复，no-repeat ，repeat-x，为x轴重复，repeat-y，为y轴重复*/
background-repeat:no-repeat;
/* 设置背景图片的位置position （x轴y轴） */
background-position:100px 100px ;
}
#jianyue{
/* 设置边框为4px，设置为固体，红色 */
border:4px solid red;
/* 设置div的大小宽长 */
width:400px;
height:400px;
/* 设置背景颜色gray灰色，设置背景图片的位置，no-repeat禁止背景图片重复，设置位置
*/
background:gray url(./images/1.png) no-repeat 100px 100px;
}
</style>
</head>
<body>
<div class="wanzheng">
</div>
<div id="jianyue">
</div>
</body>
</html>
