背景

来源：互联网发布：机加工报价软件编辑：程序博客网时间：2024/04/29 02:12
<!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>
0 0