前言：

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. selenium+谷歌无头浏览器爬取网易新闻国内板块

    网页分析 首先来看下要爬取的网站的页面 查看网页源代码:你会发现它是由js动态加载显示的 所以采用selenium+谷歌无头浏览器来爬取它 1 加载网站,并拖动到底,发现其还有个加载更多 2 模拟点击 ...

  2. Kubernetes 笔记 10 Job 机器人加工厂

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. Hi,大家好, ...

  3. 《前端之路》之五 head 头标签指南

    12:head 头标签指南 常见头标签 DOCTYPE 文档模式 对文档进行有效性验证 告诉用户代理或浏览器这个文档是按照什么DTD写的,但是这个动作是被动的,每次页面加载时,浏览器并不会下载DTD, ...

  4. springboot~集成测试里的redis

    测试不应该访问外部资源 对于单元测试,集成测试里,如果被测试的方法中使用到了redis,你需要去模拟一个单机环境的redis server,因为只有这样,你的测试才是客观的,即不会因为网络和其它因素影 ...

  5. 补习系列(17)-springboot mongodb 内嵌数据库

    目录 简介 一.使用 flapdoodle.embed.mongo A. 引入依赖 B. 准备测试类 C. 完善配置 D. 启动测试 细节 二.使用Fongo A. 引入框架 B. 准备测试类 C.业 ...

  6. C++求集合的交集差集

    标准库的<algorithm>头文件中提供了std::set_difference,std::set_intersection和std::set_union用来求两个集合的差集,交集和并集 ...

  7. ios键盘弹起 body的高度拉长，页面底部空白问题。ios软键盘将页面抵到上面后，关闭软键盘页面不回弹的问题。

    js 监听ios手机键盘弹起和收起的事件 /* js 监听ios手机键盘弹起和收起的事件 */ document.body.addEventListener('focusin', () => { ...

  8. 系统设计Design For Failure思想

    系统设计Design For Failure思想 Complex systems fail in spectacular ways. Failure isn't a question of if, b ...

  9. VS code 设置中文后也显示英文的问题

    按f1 搜索 Configore Display Language 设置 zh-cn 关闭软件重启. 如果重启菜单等还是英文的,在商店查看已安装的插件,把中文插件重新安装一遍,然后重启软件.

  10. Django之CSRF跨站请求伪造（老掉牙的钓鱼网站模拟）

    首先这是一个测试的代码 请先在setting页面进行下面操作 注释完成后,开始模拟钓鱼网站的跨站请求伪造操作: 前端代码: <!DOCTYPE html> <html lang=&q ...