zoukankan      html  css  js  c++  java
  • 背景样式

    <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>
  • 相关阅读:
    在Ubuntu_meta 16.04中设置默认Python3.5的命令
    树莓派安装中文输入法Fcitx及Google拼音输入法
    树莓派安装ubuntu_meta并配置开发环境
    业务代表模式
    MVC 模式
    访问者模式
    模板模式
    Linux进程调度与抢占
    IP地址
    策略模式
  • 原文地址:https://www.cnblogs.com/lujieting/p/10182577.html
Copyright © 2011-2022 走看看