前言：

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. ansible copy 模块的使用

    copy copy 模块是将 ansible 管理主机上的文件拷贝上远程主机中,与 fetch 相反,如果目标路径不存在,则自动创建,如果 src 的目录带“/” 则复制该目录下的所有东西,如果 sr ...

  2. okhttputils【 Android 一个改善的okHttp封装库】使用（一）

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 本文使用的OKHttp封装库是张鸿洋(鸿神)写的,因为在项目中一直使用这个库,所以对于一些常用的请求方式都验证过,所以特此整理下. ...

  3. Python的魔法函数系列 __getattrbute__和__getattr__

      #!/usr/bin/env python # -*- coding: utf-8 -*- import sys __metaclass__ = type """ _ ...

  4. SLAM+语音机器人DIY系列：（八）高阶拓展——2.centos7下部署Django（nginx+uwsgi+django+python3)

    0.安装步骤预览(1)系统默认自带python2.x,所以需要先安装python3.x(2)python2对应pip,python3对应pip3,用源码安装python3后pip3也自动安装了(3)用 ...

  5. GoLang simple-project-demo-01

    Hello world 经典例子: package main import "fmt" func main(){ fmt.Println("hello world&quo ...

  6. [Javascript] encodeURIComponent()方法

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

  7. 使用C#开发windows服务定时发消息到钉钉群_群组简单消息

    前言:本提醒服务,是由C#语言开发的,主要由windows服务项目和winform项目组成,运行服务可实现功能:向钉钉自定义机器人群组里,定时,定次,推送多个自定义消息内容,并实现主要功能的日志记录. ...

  8. [转] 以后再有人问你selenium是什么，你就把这篇文章给他

    本文转自:https://blog.csdn.net/TestingGDR/article/details/81950593 写在最前面:目前自动化测试并不属于新鲜的事物,或者说自动化测试的各种方法论 ...

  9. SmartUpload工具包的中文乱码问题详解

    关于SmartUpload工具包的中文乱码问题,输出在服务端的中文显示是乱码,而英文数字,没有任何问题,我在网上看了其他人的问题和回答,让我觉得有道理,却又用不着,最后在多次试验中,终于找到了问题所在 ...

  10. dubbo-源码分析Provider

    Dubbo provider启动原理: 当我们的dubbo启动我们的spring容器时spring 初始化容器的时候会查找META-INF/spring.handles文件查找对应的Namespace ...