zoukankan      html  css  js  c++  java
  • CSS3之让背景图片全部显示

    起初是在处理一个图片显示的问题, 图片没有有一部分没有显示出来, 之后用到了background-size, 发现有必要总结一下。

    background-size

        首先声明

           background-size是一个css3属性。 翻译过来很容易就知道它是用来规定背景尺寸的。

        关于浏览器兼容性

            IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+。

        用法

           background-size有4个值分别是(length percentage cover contain)。

                length: 它主要是用来规定背景的宽(width)和高(heigth)。eg: background-size: 100px 100px; 

                percentage: 它主要是用来以父元素的百分比来设置背景的宽高。 eg: background-size: 50% 50%;

                length和percentage的用法其实是相似的, 都是通过设置背景的长宽来显示图片。 如果只有一个参数, 则表示另一个参数为auto

               cover: 它主要表示把图片扩展到足够大, 以使背景图像完全覆盖背景区域。 这里要注意背景图像的某些部分也许无法显示在背景定位区域中。eg: background-size: cover;

                contain: 它主要表示把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。eg: background-size: contain;

        完全显示图片内容

        随便在网上找了张图片url('http://demo.sc.chinaz.com//Files/DownLoad/moban/201512/moban869/images/banner.jpg')

    background-size: contain;
    background: url('http://demo.sc.chinaz.com//Files/DownLoad/moban/201512/moban869/images/banner.jpg') no-repeat
  • 相关阅读:
    剑指 Offer 22. 链表中倒数第k个节点
    1221. 分割平衡字符串
    1528. 重新排列字符串
    1450. 在既定时间做作业的学生人数
    1266. 访问所有点的最小时间
    1572. 矩阵对角线元素的和
    使用Python进行数据传输
    分布式系统的原理与设计
    分布式缓存
    Centos6 配置最新yum源
  • 原文地址:https://www.cnblogs.com/MonkeyKingK/p/5020826.html
Copyright © 2011-2022 走看看