CSS背景

概念：CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。

属性	描述
background-attachment	背景图像是否固定或者随着页面的其余部分滚动
background-color	设置元素的背景颜色
background-image	把图片设置为背景
background-position	设置图片的起始位置
background-repeat	设置背景图片是否及如何重复

background-size	规定背景图片的尺寸
background-origin	规定背景图片的定位区域
background-clip	规定背景的绘制区域

<!--background.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <p>test the background-color</p>
    <p>test the background-color</p>
    <p>test the background-color</p>
    <p>test the background-color</p>
    <p>test the background-color</p>
    <p>test the background-color</p>
    <p>test the background-color</p>
    <p>test the background-color</p>
    <p>test the background-color</p>
    <p>test the background-color</p>
    <p>test the background-color</p>
</body>
</html>

/*style.css*/
body{
    /*background-color: khaki;*/
    background-image: url("1.jpg");
    background-repeat: no-repeat;   /*图片不允许重复*/
    /*background-position: right top;*/
    /*background-position: 100px 100px;*/
    /*background-attachment: fixed;*/
    background-size: 100px 100px;
    /*right和center*/
}


p{
    width: 150px;
    padding: 10px;
    background-color: blueviolet;
}

posted on 2019-03-13 21:59 自闭少女阅读(124) 评论(0) 编辑收藏举报