CSS背景--样式

1.background-color 背景颜色
   默认值 transparent（透明的）
  同时定义背景图片和颜色时，背景图片将覆盖在背景颜色之上。
2.background-image 背景图片
  默认值是none（没有图片）
  通过url指定图片
   background-image: url("../04I58PICaWv_1024.jpg"); width:100px; height:100px; background-size:100px; 需要指定宽和高。
  可同时设置多张图片。
  background-image: url("test.jpg"),url("test.jpg");
3.background-repeat 背景图片是否重复
   默认值是repeat（重复）
   repeat-x 图片在横向上平铺
   repeat-y 图片在纵向上平铺
   no-repeat 不重复平铺
4.background-size 背景图片大小
   默认值是auto（真实大小）
　length 用长度值指定背景图像大小，不允许负值（一个值默认宽度）
   percentage 用百分比指定背景图像大小，不允许负值
5.background-attachment： 背景图片是否随内容滚动
   默认值是scroll（滚动条动会跟着动）
    fixed 背景图像相对于窗体固定，滚动条滚动图像不动，但它的容器会消失
6.background-position 背景图片位置（相对于外层容器）
  background-attachment是固定位置，会影响background-position的设置
使用此属性，必须先指定background-image属性。
   默认值 0% 0%  效果等同于left top
    如果提过两个值，第一个用于横坐标，第二个用于纵坐标。
   如果只提供一个值，该值将用于横坐标，纵坐标将默认为50%
可使用方位英文、百分比、确切的值进行定位
7.background-Origin指定了背景图像的位置区域。【CSS3】
  content-box, padding-box,和 border-box区域内可以放置背景图像
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background-Origin</title>
    <style type="text/css">
        div{
            height: 500px;
            width: 500px;
            border:10px solid black;
            padding:35px;
            background-color: deeppink;
            background-image: url("test.jpg"),url("test.jpg"),url("test.jpg");
            background-repeat: no-repeat;
            background-size: 100px;
            background-position:left top,right top,left bottom;
            background-origin: content-box,padding-box,border-box;
        }
    </style>
</head>
<body>
<div>段落段落段落段落段落段落段落</div>
</body>
</html>
background-Origin
8.background-clip  规定背景的绘制区域。【CSS3】
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS背景3</title>
    <style type="text/css">
        #div1{
            height: 100px;
            width: 100px;
            border:10px dotted black;
            padding:35px;
            background-color: deeppink;
            background-clip: border-box;
        }
        #div2{
            height: 100px;
            width: 100px;
            border:10px dotted black;
            padding:35px;
            background-color: deeppink;
            background-clip: padding-box;
        }
        #div3{
            height: 100px;
            width: 100px;
            border:10px dotted black;
            padding:35px;
            background-color: deeppink;
            background-clip: content-box;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<hr/>
<div id="div2"></div>
<hr/>
<div id="div3"></div>

</body>
</html>
background-clip
9.background 复合属性
   background: url("boy.jpg") red no-repeat left top; 
   background:url("test.jpg") left top no-repeat,url("test.jpg") right top no-repeat,url("test.jpg") right bottom no-repeat;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS背景1</title>
    <style type="text/css">
        div{
            height: 500px;
            width: 500px;
            background-color: deeppink;
            background-image: url("test.jpg");
            background-repeat: no-repeat;
            background-size: 100px;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
CSS背景1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS背景2</title>
    <style type="text/css">
        div{
            height: 500px;
            width: 500px;
            background-color: deeppink;
            background-image: url("test.jpg");
            background-repeat: no-repeat;
            background-size: 100px;
            background-position:center;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>
CSS背景2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS背景3</title>
    <style type="text/css">
        div{
            height: 500px;
            width: 500px;
            background-color: deeppink;
            background-image: url("test.jpg"),url("test.jpg"),url("test.jpg");
            background-repeat: no-repeat;
            background-size: 100px;
            background-position:left top,right top,left bottom;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>
CSS背景3

 10.默认情况下background-color/background-image 延伸到了border的外边缘。

 

posted @ 2019-07-09 15:27  C_XingM  阅读(152)  评论(0)    收藏  举报