• 背景样式


    <style>
    div{
    300px;
    height: 500px;
    border: 1px solid red;
    /*添加背景*/
    background-image: url("images/img/bg-img.jpg");
    /*background-image: url("images/img/share1.png");*/
    background-repeat: no-repeat;

    /*设置背景图片的大小 宽度/高度 宽度/auto(保持比例自动缩放)
    建议:在使用这个属性之前衔确定宽高比与容器的宽高比是否一致,否则会造成图片失真变形*/
    background-size: 300px 500px;
    background-size: 300px;
    /*设置百分比,是参照父容器可放置内容区域的百分比*/
    background-size: 50% 50%;

    /*设置contain:按比例调整图片大小,使用图片宽高自适应整个元素的背景区域,使图片全部包含在容器内
    1.图片大于容器:有可能造成容器的空白区域,将图片缩小
    2.图片小于容器:有可能造成容器的空白区域,将图片放大*/
    background-size: contain;

    /*cover:与contain刚好相反,背景图片会按比例缩放自 适应整个背景区域,如果背景区域不足以包含所有背景图片,图片内容会溢出
    1.图片大于容器:等比例缩小,会填满整个背景区域,有可能造成图片的某些区域不可见
    2.图片小于容器:等比例放大,填满整个背景区域,图片有可能造成某个方向上内容的溢出*/
    background-size: cover;
    }
    </style>
    </head>
    <body>
    <div></div>
  • 相关阅读:
    可重入锁 RLOCK(转)
    python 全局变量的简单理解
    urlopen设置代理方法
    python is id == 的差别,cmp方法
    FutureTask
    Java基础复习
    计算机编程底层基础
    Microsoft.NET框架程序设计20 CLR寄宿、应用程序域、反射
    Microsoft.NET框架程序设计19 自动内存管理(垃圾收集)
    Microsoft.NET框架程序设计17 委托
  • 原文地址:https://www.cnblogs.com/lujieting/p/10182577.html
Copyright © 2020-2023  润新知