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. 如何配置node环境变量

    1,安装node.js   最后安装的目录在 检测node安装成功   node -v 如果报错   没有默认装在c盘  pro 需要配置环境变量 Npm   node  package  manag ...

  2. 「面向 offer 学算法」笔面试大杀器 -- 单调栈

    目录 前言 单调栈 初入茅庐 小试牛刀 打怪升级 出师试炼 前言 单调栈是一种比较简单的数据结构.虽然简单,但在某些题目中能发挥很好的作用. 最近很多大厂的笔试.面试中都出现了单调栈的题目,而还有不少 ...

  3. C++STL中vector的初始化

    vector的初始化有很多方式,在N维初始化时还会一些容易出现错误的地方.下面进行总结 以下的总结均以int作为模板参数 一维vector的初始化 vector的构造函数通常来说有五种,如下: vec ...

  4. 如何解决SpringBoot工程中的错误:java.sql.SQLNonTransientConnectionException: CLIENT_PLUGIN_AUTH is required

    出错原因:MySQL依赖及MySQL驱动包高于在使用的MySQL数据库版本. 比如,我本地数据库版本是:Server version: 5.2.3-falcon-alpha-community-nt ...

  5. django之models字段参数

    字段内部参数: null 数据库中字段是否可以为空 db_column 数据库中字段的列名 db_tablespace default 数据库中字段的默认值 primary_key 数据库中字段是否为 ...

  6. python中多进程multiprocessing、多线程threading、线程池threadpool

    浅显点理解:进程就是一个程序,里面的线程就是用来干活的,,,进程大,线程小 一.多线程threading 简单的单线程和多线程运行:一个参数时,后面要加逗号 步骤:for循环,相当于多个线程——t=t ...

  7. Tomcat 第一篇:源码导入 IDEA 编辑器

    1 引言 做 Java 的同学应该都见过上面这只名字叫 Tomcat 的猫,毕竟这只猫在过去和现在都是全球最流行的 Web 容器之一. 很有意思的一件事儿是从我接触这只猫开始,从来不知道它的中文名字是 ...

  8. netty字节分包

    高并发压测时,发现来自网关的消息出现粘包现象:分包就是势在必行的 前置和处理平台(暂时)使用netty通话,由于都是服务器平台使用DelimiterBasedFrameDecoder来解决分包 和网关 ...

  9. SpringBoot框架:快速入门搭建运行一个应用程序(一)

    一.环境配置 Java环境:1.8版本 开发工具:IntelliJ IDEA 二.简单应用 1.创建项目 选择创建的项目类型为Spring Initializr,Project SDK选择1.8版本的 ...

  10. 容器云平台No.2~kubeadm创建高可用集群v1.19.1

    通过kubernetes构建容器云平台第二篇,最近刚好官方发布了V1.19.0,本文就以最新版来介绍通过kubeadm安装高可用的kubernetes集群. 市面上安装k8s的工具很多,但是用于学习的 ...