前言：

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. 爬虫框架之Scrapy（四 ImagePipeline）

    ImagePipeline 使用scrapy框架我们除了要下载文本,还有可能需要下载图片,scrapy提供了ImagePipeline来进行图片的下载. ImagePipeline还支持以下特别的功能 ...

  2. [WP]BugkuCtf - pwn2

    1.首先运行一下该程序 2.我们权限不够于是去修改一下权限(改前,改后) 3.改后我们重新运行一下(123是输入的语句) 4.拖进IDA,查看字符串,此处应该就是得到flag的地方 5.之后我们查看m ...

  3. 在Linux系统配置Nodejs环境的最简单步骤，部署多个thinkjs（nodejs）项目

    发现一台服务器部署管理多个nodejs服务,可以采用二级域名weekly.mwcxs.top,也可以采用固定后缀www.mwcxs.top/weekly的方式,本文先从固定后缀的方式部署管理多个nod ...

  4. Python爬虫入门教程 50-100 Python3爬虫爬取VIP视频-Python爬虫6操作

    爬虫背景 原计划继续写一下关于手机APP的爬虫,结果发现夜神模拟器总是卡死,比较懒,不想找原因了,哈哈,所以接着写后面的博客了,从50篇开始要写几篇python爬虫的骚操作,也就是用Python3通过 ...

  5. FragmentTabHostUnderLineDemo【FragmentTabHost带下划线】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 使用FragmentTabHost实现顶部选项卡(带下划线效果)展现. 效果图 代码分析 1.该Demo中采用的是FragmentT ...

  6. ABP框架连接Mysql数据库

    开始想用Abp框架来搭建公司的新项目,虽然一切还没有定数,但是兵马未动,粮草先行,我先尝试一下整个过程,才能够更好的去争取机会. 此次技术选型:Abp(Asp.Net core mvc)+mysql( ...

  7. (转)使用JMeter进行Web压力测试

    使用JMeter进行压力测试 说到压力测试,一般第一反应都是LoadRunner.这个软件也确实是自动化测试的一个事实标准.无奈这个软件太过庞大,以及不能在MacOS上使用.我由于项目的需要,需要对一 ...

  8. 使用strace命令跟踪系统调用

    一.是什么strace? strace常用来跟踪进程执行时的系统调用和所接收的信号. 在Linux世界,进程不能直接访问硬件设备,当进程需要访问硬件设备(比如读取磁盘文件,接收网络数据等等)时,必须由 ...

  9. ASP.NET Core 2.2 十八.各种Filter的内部处理机制及执行顺序

    ASP.NET core 的Filter是系统中经常用到的,本文详细分享一下各种Filter定义.执行的内部机制以及执行顺序.(ASP.NET Core 系列目录) 一. 概述 ASP.NET Cor ...

  10. 玩转Spring Cloud之熔断降级（Hystrix）与监控

    本文内容导航目录: 前言:解释熔断降级一.搭建服务消费者项目,并集成 Hystrix环境 1.1.在POM XML中添加Hystrix依赖(spring-cloud-starter-netflix-h ...