backgroun-size:cover;

.是按照等比缩放铺满整个区域。主要用于图片比div小的时候,将图片按照某一边的比例扩大以填充整个div背景。

.优点:图片不会被拉升,且实用于div长度和宽度的比例合适时候

.缺点:图片会失真,且当宽度和高度比例过大时候,会出现图片显示不全。

backgroun-size:contain:

.也是等比缩放,按照某一边来覆盖显示区域的,会有白边。

.优点:图片不会拉升,且适用于图片比div大时候。

.缺点:有白边

background-size:100% 100%;

.长宽100%显示,可能会拉升图片。

.优点:能使得图片完全在div中显示出来。

.缺点:可能造成图片拉升和失真。

background-size 详解的更多相关文章

  1. CSS中background属性详解

    CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...

  2. CSS background 属性详解

    CSS background Property 语法: background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-cl ...

  3. 【转载】sizeof()、strlen()、length()、size()详解和区别

    c/c++中获取字符串长度.有以下函数:size().sizeof() .strlen().str.length();一.数组或字符串的长度:sizeof().strlen()1.sizeof():返 ...

  4. css样式之background详解

    background用法详解: 1.background-color 属性设置元素的背景颜色 可能的值 color_name            规定颜色值为颜色名称的背景颜色(比如 red) he ...

  5. css样式之background详解(格子效果)

    background用法详解: 1.background-color 属性设置元素的背景颜色 可能的值 color_name            规定颜色值为颜色名称的背景颜色(比如 red) he ...

  6. CSS背景属性Background详解

    [转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...

  7. HTTPS 传输优化详解之动态 TLS Record Size

    笔者在过去分析了诸多可以减少 HTTPS 传输延迟的方法,如分布式 Session 的复用: 启用 HSTS,客户端默认开启 HTTPS 跳转:采用 HTTP/2 传输协议:使用 ChaCha20-P ...

  8. Flume启动运行时报错org.apache.flume.ChannelFullException: Space for commit to queue couldn't be acquired. Sinks are likely not keeping up with sources, or the buffer size is too tight解决办法(图文详解)

        前期博客 Flume自定义拦截器(Interceptors)或自带拦截器时的一些经验技巧总结(图文详解) 问题详情 启动agent服务 [hadoop@master flume-1.7.0]$ ...

  9. css详解background八大属性及其含义

    background(背景) 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由 元素外边距(margin).元素边框(border).元素内边距(padding)和元素内容(c ...

  10. CSS3详解:background

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

随机推荐

  1. 搭建好lnmp后,使用浏览器访问,出现404 Not Found

    出现404 Not Found的原因是nginx指向页面不存在,编辑nginx配置文件,修改nginx指向页面路径 root html; 修改为 root /usr/share/nginx/html; ...

  2. 解决Oracle在win10 64使用plsql 无法显示表

    将当前用户切换至所有用户,然后再切换至当前用户,问题解决 图中sql也可查询出当前库中存在的表: select object_name from user_objects where lower(ob ...

  3. Mybatis源码学习第八天(总结)

    源码学习到这里就要结束了; 来总结一下吧 Mybatis的总体架构 这次源码学习我们,学习了重点的模块,在这里我想说一句,源码的学习不是要所有的都学,一行一行的去学,这是错误的,我们只需要学习核心,专 ...

  4. opencv-python函数

    opencv-python读取.展示和存储图像 1.imshow函数 imshow函数作用是在窗口中显示图像,窗口自动适合于图像大小,我们也可以通过imutils模块调整显示图像的窗口的大小.函数官方 ...

  5. mysql jdbc连接时的小问题java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: YES)

    这次重新修改老程序时出现了上面的错误,排查过后最终找到问题所在:root帐户默认不开放远程访问权限,所以需要修改一下相关权限. 打开MySQL目录下的my.ini文件(win10默认安装在C:\Pro ...

  6. leetcode刷题-62不同路径2

    题目 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下图中标记为“Finish”). 现在 ...

  7. Python数据类型方法整理

      前言:主要是对Python数据类型做一个整理,部分知识点源于<python3程序开发指南(第二版)>   一.Python的关键要素 1.1 要素1:数据类型  int类型 str类型 ...

  8. python之ddt模块使用

    一.DDT(数据驱动)简介 Data-Driven Tests(DDT)即数据驱动测试,可以实现不同数据运行同一个测试用例(通过数据的不同来驱动测试结果的不同). ddt本质其实就是装饰器,一组数据一 ...

  9. JVM垃圾收集机制

    JVM垃圾回收机制是java程序员必须要了解的知识,对于程序调优具有很大的帮助(同时也是大厂面试必问题). 要了解垃圾回收机制,主要从三个方面: (1)垃圾回收面向的对象是谁? (2)垃圾回收算法有哪 ...

  10. 虚拟机系列 | JVM特点,基础结构与执行周期

    本文源码:GitHub·点这里 || GitEE·点这里 一.虚拟机简介 1.虚拟机概念 虚拟机(Virtual Machine)指通过软件模拟的具有完整硬件系统功能的.运行在一个完全隔离环境中的完整 ...