背景

最新推荐文章于 2024-07-16 14:38:52 发布
lulu_jiang
最新推荐文章于 2024-07-16 14:38:52 发布
阅读量781
点赞数
分类专栏： CSS3
本文链接：https://blog.csdn.net/lulu_jiang/article/details/42490603
版权
CSS3 专栏收录该内容
15 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        *{margin:0;padding:0;}

        /**************************** 背景基本属性 ***************************/
        /* background-color设置背景颜色 */
        /* background-image设置背景图片 */
        /* background-repeat设置背景图片展示方式 */
        /* background-attachment设置背景是固定还是滚动 */
        /* background-position设置背景图片位置 */
        /* background:<background-color> [,<background-image>] [,<background-repeat>] [,<background-attachment>] [,<background-position] */
        #background1>div{margin:10px;width:100px;height:100px;border:1px solid #ccc;display:inline-block;}
        #background1>div:nth-of-type(1){background-color:red;background-color:rgba(255,0,0,0.1);}
        #background1>div:nth-of-type(2){background-image:url(images/New_bg.png);}
        #background1>div:nth-of-type(3){background-image:url(images/New_bg.png);background-repeat:repeat-y;}
        #background1>div:nth-of-type(4){background-image:url(images/New_bg.png);background-repeat:no-repeat;background-attachment:fixed;}
        #background1>div:nth-of-type(5){background-image:url(images/New_bg.png);background-repeat:no-repeat;background-position:10% 10% 0 0;}
        #background1>div:nth-of-type(6){background-image:url(images/New_bg.png);background-repeat:no-repeat;background-position:50% 0;}
        #background1>div:nth-of-type(7){background-image:url(images/New_bg.png);background-repeat:no-repeat;background-position:100% 0;}
        #background1>div:nth-of-type(8){background-image:url(images/New_bg.png);background-repeat:no-repeat;background-position:100% 50%;}
        #background1>div:nth-of-type(9){background-image:url(images/New_bg.png);background-repeat:no-repeat;background-position:100% 100%;}
        #background1>div:nth-of-type(10){background-image:url(images/New_bg.png);background-repeat:no-repeat;background-position:50% 100%;}
        #background1>div:nth-of-type(11){background-image:url(images/New_bg.png);background-repeat:no-repeat;background-position:0 100%;}
        #background1>div:nth-of-type(12){background-image:url(images/New_bg.png);background-repeat:no-repeat;background-position:0 50%;}
        #background1>div:nth-of-type(13){background-image:url(images/New_bg.png);background-repeat:no-repeat;background-position:50% 50%;}
        
        /* background-origin:padding-box || border-box || content-box指定绘制背景图片的起点 */
        #background2>div{background:orange url(images/New_bg.png) no-repeat left top;margin:10px;padding:20px;width:100px;height:100px;border:1px solid #ccc;display:inline-block;border:20px dashed rgba(0,0,0,0.3);}
        /* 背景background-position起始点从边框内边缘(padding外边缘)开始 */
        #background2>div:nth-of-type(2){background-origin:padding-box;}
        /* 背景background-position起始点从边框外边缘开始 */
        #background2>div:nth-of-type(3){background-origin:border-box;}
        /* 背景background-position起始点从padding内边缘(content外边缘)开始 */
        #background2>div:nth-of-type(4){background-origin:content-box;}

        /* background-clip:padding-box || border-box || content-box指定背景图片裁剪区域 */
        #background3>div{background:orange url(images/bg.png) no-repeat left top;margin:10px;padding:20px;width:100px;height:100px;border:1px solid #ccc;display:inline-block;border:20px dashed rgba(0,0,0,0.3);}
        #background3>div:nth-of-type(2){background-clip:border-box;}
        #background3>div:nth-of-type(3){background-clip:padding-box;}
        #background3>div:nth-of-type(4){background-clip:content-box;}

        /* background-clip还有一个text属性，配合Webkit内核的私有属性text-fill-color:transparent可以制作背景图片填充的文本效果 */
        #background4{background:orange url(images/btn_stud_online.png);-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:#fff;font-weight:bold;font-size:40px;width:200px;}

        /* background-size：auto || <length> || <perentage> || cover || contain指定背景图片的尺寸 */
        #background5>div{border:1px solid #ccc;width:100px;height:150px;margin:10px;display:inline-block;}
        /* background-size:auto;背景图不会失真 */
        #background5>div:nth-of-type(1){background:url(images/New_bg.png) no-repeat;background-size:auto;}
        #background5>div:nth-of-type(2){background:url(images/New_bg.png) no-repeat;background-size:100px 100px;}
        #background5>div:nth-of-type(3){background:url(images/New_bg.png) no-repeat;background-size:10% 90%;}
        #background5>div:nth-of-type(4){background:url(images/New_bg.png) no-repeat;background-size:cover;}
        /* background-size:cover;background-position:center;配合常用来制作满屏背景效果，但需要图片尺寸足够大 */
        #background5>div:nth-of-type(5){background:url(images/New_bg.png) no-repeat;background-size:cover;background-position:center;}
        /* background-size:contain;可以使图片按照自己的宽高比填充 */
        #background5>div:nth-of-type(6){background:url(images/New_bg.png) no-repeat;background-size:contain;}

        /* 结合媒体检查，制作全屏背景 */
        body{background:#000 url(images/screen.jpg) center center fixed no-repeat;background-size:cover;}
        @media only all and (max-width:1024px) and (max-height:768px)
        {
            body{background-size: 1024px 768px;}
        }
        @media only all and (max-width:640px) and (max-height:480px)
        {
            body{background-size:640px 480px;}
        }

        /* 多背景 */
        #background6{background:url(images/btn_control_lock_unlocked.png) no-repeat left top,
                                url(images/btn_control_lock_unlocked_clicked.png) no-repeat right top,
                                url(images/btn_control_share_unshared.png) no-repeat left bottom,
                                url(images/btn_control_share_unshared_clicked.png) no-repeat right bottom,
                                url(images/popup_assets_bg.png) repeat left top;
                     background-origin:padding-box,padding-box,padding-box,padding-box,border-box;
                     background-clip:border-box;
                     width:100px;height:100px;border:10px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="background1">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="background2">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="background3">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="background4">背景图片<br />填充文本</div>
    <div id="background5">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="background6"></div>
</body>
</html>