• background-size 设置背景图片的大小


    background-size

    设置背景图片的大小,以长度值百分比显示,还可以通过covercontain来对图片进行伸缩。

    语法:

    background-size: auto | <长度值> | <百分比> | cover | contain

    取值说明:

    1、auto:默认值,不改变背景图片的原始高度和宽度;

    2、<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放

    3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上;

    4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器

    5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止

    提示:大家可以在右边的编辑窗口输入自己的代码尝试不同取值的效果。

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8">
    <title>背景图片大小</title>
    <style type="text/css">
    .demo {
        background: url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;
         300px;
        height: 140px;
        border: 1px solid #999;
        background-size:cover;
    }
    </style>  
    </head> 
    <body>
    <div class="demo"></div>
    </body>
    </html>
    
  • 相关阅读:
    博客作业04--树
    博客作业03--栈和队列
    博客作业2---线性表
    博客作业01-抽象数据类型
    C语言最后一次作业--总结报告
    CSAPP(8):系统级IO
    CSAPP(7):虚拟存储器
    CSAPP(6):异常控制流
    CASPP(5):链接
    CSAPP(4):存储器层次结构
  • 原文地址:https://www.cnblogs.com/uduemc/p/4204328.html
Copyright © 2020-2023  润新知