前言：

css应用中，我们常会碰到background-size的用法，不妨下面总结一下，以便后续查看。

一、先弄个简单的box框。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        html,

        body {

            width: 100%;

            height: 100%;

            margin: 0;

            padding: 0;

        }

        .box {

            width: 100%;

            height: 100%;

            background-image: url('images/page_bg_29078d1.jpg');

            background-repeat: no-repeat;

            /* background-size: 100% 100%; */

            /* background-size: auto 100%; */

            /* background-size: 100% auto; */

            /* background-size: contain; */

            background-size: cover;

        }

    </style>

</head>

<body>

    <div class="box">

    </div>

</body>

</html>

二、看效果：

情况1：background-size: 100% 100%;

看的出来，图片长宽都显示出来了，但是图片变形了。

情况2：background-size: auto 100%;

看到没，纵向没问题，横向只能显示一部分。

情况3：background-size: 100% auto;

看到没，横向能全部显示出来，但是相对，整体缩小了很多。

情况4：background-size:contain；

;和上面效果一样。

情况5：background-size: cover;

和情况2一样。

小结：

平时根据需要以下三个就可以了。

background-size: 100% 100%;
background-size: contain;
background-size: cover;

浅谈background-size的几个属性值的更多相关文章

  1. 浅谈jquery关于select框的取值和赋值

    浅谈jquery关于select框的取值和赋值   jQuery("#select_id").change(function(){}); // 1.为Select添加事件,当选择其 ...

  2. 浅谈JavaScript对象数组根据某属性sort升降序排序

    1.自定义一个比较器,其参数为待排序的属性. 2.将带参数的比较器传入sort(). var data = [ {name: "Bruce", age: 23, id: 16, s ...

  3. 浅谈Javascript数据属性与访问器属性

    ES5中对象的属性可以分为‘数据属性’和‘访问器属性’两种. 数据属性一般用于存储数据数值,访问器属性对应的是set/get操作,不能直接存储数据值. 数据属性特性:value.writable.en ...

  4. 浅谈块元素绝对定位的margin属性

    对于div的绝对定位一直以为margin属性是无效的,只是通过top,left,bottom,right定位,然而今天的却发现不是这样的,于是对其做了些实验: 使用的HTML原始测试文件: <! ...

  5. 浅谈background的用法

    div css 背景样式background属性 一.语法及参数 1.语法:background : background-color(颜色) || background-image(图片地址) || ...

  6. 浅谈js数组中的length属性

    前言 一位正在学习前端的菜鸟,虽菜,但还未放弃. 内容 首先,我们都知道每个数组都有一个length属性 这个length属性一般我们用来循环遍历的约束,一般我们都会把他认为是该数组里面有几个元素这个 ...

  7. (转)浅谈MD5加密算法中的加盐值(SALT)

    我们知道,如果直接对密码进行散列,那么黑客可以对通过获得这个密码散列值,然后通过查散列值字典(例如MD5密码破解网站),得到某用户的密码. 加Salt可以一定程度上解决这一问题.所谓加Salt方法,就 ...

  8. Web应用你加盐了吗？——浅谈MD5加密算法中的加盐值(SALT)

    转自:http://blog.csdn.net/blade2001/article/details/6341078 我们知道,如果直接对密码进行散列,那么黑客可以对通过获得这个密码散列值,然后通过查散 ...

  9. JS中使用document.defaultView.getComputedStyle()、currentStyle()方法获取CSS属性值

    在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性 ...

  10. 原生js使用getComputedStyle方法获取CSS内部属性值

    在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式, 1.下面的方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),而无法获取定义在<style ...

随机推荐

  1. Fastadmin安装以及各种问题解决

    FastAdmin是一款基于ThinkPHP5+Bootstrap的极速后台开发框架 https://www.fastadmin.net/ 参照官方文档安装,还是有坑的 首先注意:无需下载PHP.Th ...

  2. 爬虫框架之Scrapy(一)

    scrapy简介 scrapy是一个用python实现为了爬取网站数据,提取结构性数据而编写的应用框架,功能非常的强大. scrapy常应用在包括数据挖掘,信息处理或者储存历史数据的一系列程序中. s ...

  3. redis的string类型！！！！

    value的最大存储量为512m,可储存图像数据或json数据等 1.redis的增加操作 127.0.0.1:6379> set name China     --返回ok,说明增加成功,若n ...

  4. 【Android Studio安装部署系列】十一、Android studio获取数字签名信息

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 下面介绍下调试版本和发布版本获取数字签名的方法,通过以下方法可以获取到SHA1和MD5. 一般在使用分享功能,在第三方平台中创建应用 ...

  5. 【Android Studio安装部署系列】二十七、Android studio修改项目名称和包名

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 实际项目开发中可能碰到项目名称写错了或者需要修改,而且包名可能也想要修改,那么如何操作呢. 本文是在Android Studio3. ...

  6. 图解Go语言内存分配

    目录 基础概念 内存管理单元 内存管理组件 mcache mcentral mheap 内存分配流程 总结 参考资料 Go语言内置运行时(就是runtime),抛弃了传统的内存分配方式,改为自主管理. ...

  7. 是时候给大家介绍 Spring Boot/Cloud 背后豪华的研发团队了。

    看了 Pivotal 公司的发展历史,这尼玛就是一场商业大片呀. 我们刚开始学习 Spring Boot 的时候肯定都会看到这么一句话: Spring Boot 是由 Pivotal 团队提供的全新框 ...

  8. kubernetes系列11—PV和PVC详解

    本文收录在容器技术学习系列文章总目录 1.认识PV/PVC/StorageClass 1.1 介绍 管理存储是管理计算的一个明显问题.该PersistentVolume子系统为用户和管理员提供了一个A ...

  9. 服务器linux centos 7.4 搭建ftp服务器

    此操作是在腾讯云服务器linux centos 7.4 完成搭建ftp服务器 vsftpd 的: 安装 vsftpd $ yum install vsftpd -y 启动 $ service vsft ...

  10. [Javascript] encodeURIComponent()方法

    在vue項目中使用vue-router通过url进行传值 encodeURIComponent encodeURIComponent() 函数可把字符串作为 URI 组件进行编码.encodeURIC ...