第二课--背景
程序员文章站
2022-03-26 19:21:54
...
a.background-image添加背景图片
background-image: url("border.png");/*背景图片*/
background-position: right bottom, left top;/*图片位置*/
background-repeat: no-repeat, repeat;/*是否平铺*/
b.background-size背景图像的大小
c.background-origin背景图像的位置区域
d.background-clip背景剪裁属性是从指定位置开始绘制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景</title>
</head>
<style>
body {
background-image: url("border.png"); /*背景图片*/
background-position: left; /*right bottom, left top;图片位置*/
background-repeat: no-repeat; /*repeat;是否平铺*/
background-size: 20px 20px; /*背景图片的大小*/
}
div {
border: 1px solid black;
padding: 35px;
background-image: url('border.png');
background-repeat: no-repeat;
background-position: left;
}
#div1 {
background-origin: border-box;
}
#div2 {
background-origin: content-box;
}
</style>
<body>
<p>背景图像边界框的相对位置：</p>
<div id="div1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
</div>
<p>背景图像的相对位置的内容框：</p>
<div id="div2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
</div>
</body>
</html>