background的应用和雪碧图

最新推荐文章于 2022-11-14 00:52:22 发布

朝思暮林

最新推荐文章于 2022-11-14 00:52:22 发布

阅读量301

点赞数

分类专栏： H5 文章标签： background 雪碧图 H5 css

本文链接：https://blog.csdn.net/zhaolimulin/article/details/70183840

版权

H5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            height: 500px;
            border: 1px solid red;
            background-color: aqua; /*背景颜色*/
            background-image:url(../../img/lenovo.jpg); /*背景图片*/
            background-repeat:no-repeat;/*no-repeat图片不平铺  repeat-x横向平铺 repeat-y纵向平铺*/
            background-position:center; /*背景图片的位置*/
            /*背景图片的大小*/
            /*background-size: 100% 100%;*/
            background-size: contain; /*contain宽高等比例缩放 直到宽高填满父布局 可能出现宽或高填充布局不完整*/
                                     /*cover 图片宽高等比例缩放，知道较小的宽高天马父布局，可能出现图片溢出布局*/
        }
    </style>
    <title></title>
</head>
<body>
<h1 align="center">background</h1>
<div>

</div>
</body>
</html>



next next next next next next next next next next next next


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /* 空格  后代选择器*/
        /*将空格改为>  就是子代选择器*/
        #container div{
            color: red;
            height: 25px;
            width: 25px;
            background-image: url("../../img/xuebitu.gif");
            background-repeat: no-repeat;
        }
        #div2{
           background-position: -42px 0;
        }
        #div3{
            background-position:0 -165px;
        }
        #div4{
            background-position: -20px -315px;
        }
        #ul > li{
            color: aqua;
        }
    </style>
    <title>雪碧图</title>
</head>
<body>
<div id="container">
    <div></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
</div>
<ul id="ul">
    <li>
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
    </li>
    <li>d</li>
    <li>e</li>
</ul>
</body>
</html>