background详解

最新推荐文章于 2023-03-27 20:16:26 发布

zj25xy11

最新推荐文章于 2023-03-27 20:16:26 发布

阅读量180

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/zj25xy11/article/details/89356155

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

   <div class="timage"></div>
   <div class="timage2"></div>

</body>

<style>
    /*
    * div宽高都大于图片
    */
    .timage{
        display: inline-block;
        width: 1200px;
        height: 1400px;
        background-color: bisque;
        background-image: url("./img/test2.jpg");
        /*设置的宽高小于图片的宽高时，图片会被压缩，然后平铺压缩后的图片，直到填满整个盒子容器；设置的宽高大于图片的宽高时，图片会被拉伸，然后平铺拉伸后的图片，直到填满整个盒子容器；*/
        background-size: 220px 300px;
        /*设置百分比与设置具体的宽高类似，都会将图片按照设置的百分比进行拉伸或者压缩，然后将拉伸或者压缩后的图片平铺填满整个盒子容器；*/
        /*background-size: 100% 100%;*/
        /*将图片放至足够大，使得图片能够完全覆盖盒子区域，超出的部分则会剪裁；*/
        /*background-size: cover;*/
        /*将图片扩大到适应整个区域，宽度刚好合适 或者 高度刚好合适，然后会平铺图片，直到填满整个盒子区域；*/
        /*background-size: contain;*/

        /*
            如设置的宽高或者百分比大于图片的宽高，图片则会拉伸，然后平铺填满整个盒子；
            如设置的宽高或者百分比小于图片的宽高，图片则会压缩，然后平铺填满整个盒子；
            cover会将图片放至足够大，以至完全填满整个盒子；会裁剪
            contain会将图片放至刚好合适(宽度或者高度刚好合适)整个盒子的位置，然后平铺填满整个盒子；会平铺
        */
        background-repeat:no-repeat;
        /*在图片小于外面div时 可以在div中水平垂直居中*/
        background-position:center center;

    }
    /*
   * div宽高都小于图片
   */
    .timage2{
        vertical-align:top;
        display: inline-block;
        border: 1px solid red;
        width: 180px;
        height: 180px;
        background-image: url("./img/test2.jpg");
        /*background-size: 100% 100%;*/
        background-size: cover;
        /*background-size: contain;*/

    }

</style>

</html>