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. 【MySQL】我这样分析MySQL中的事务,面试官对我刮目相看!!

    写在前面 相信大部分小伙伴在面试过程中,只会针对面试官提出的表面问题来进行回答.其实不然,面试官问的每一个问题都是经过深思熟虑的,面试的时间相对来说也是短暂的,面试官不可能在很短的时间内就对你非常了解 ...

  2. Activiti7 绑定业务主键以及流程定义 流程实例的挂起和激活

    绑定业务主键businessKey /** * 绑定业务主键 */ @Test public void bindingBusinessKey() { // 获取RuntimeService Runti ...

  3. 斗篷指令、属性指令、表单指令、条件指令、循环指令、js的Array操作、前台数据库、

    ```python"""1)指令 属性指令:v-bind 表达指令:v-model 条件指令:v-show v-if 循环指令:v-for 斗篷指令:v-cloak 2) ...

  4. hyperledger explorer 结合 fabric1.4 搭建 区块链浏览器 踩坑记录

    博主通过这篇博客的步骤搭建区块链浏览器:https://blog.csdn.net/qq_32675427/article/details/99946945 进行到下面这一步时出现各种异常,浪费了博主 ...

  5. House of Orange

    题目附件:https://github.com/ctfs/write-ups-2016/tree/master/hitcon-ctf-2016/pwn/house-of-orange-500 查看程序 ...

  6. 7.SwrContext音频重采样使用

    头文件位于#include <libswresample/swresample.h>   SwrContext常用函数如下所示 SwrContext *swr_alloc(void); / ...

  7. [程序员代码面试指南]递归和动态规划-排成一条线的纸牌博弈问题(DP)

    题目 给定一个整型数组arr,代表数值不同的纸牌排成一条线.玩家A和玩家B依次拿走每张纸牌,规定玩家A先拿,玩家B后拿,但是每个玩家每次只能拿走最左或最右的纸牌,玩家A和玩家B都绝顶聪明.请返回最后获 ...

  8. 最火的开源 IDE介绍与安装教程

    导读:开发C/C++最好的IDE是什么,尤其对于很多初学者来说用什么IDE比较容易上手,本文将做以介绍,并为您演示如何下载与安装. 本文字数:1015,阅读时长大约:10分钟 (一)最火的开源IDE ...

  9. 骚操作:不重启 JVM,如何替换掉已经加载的类?

    Java对象行为 java.lang.instrument.Instrumentation 直接操作字节码 BTrace Arthas 三生万物 在遥远的希艾斯星球爪哇国塞沃城中,两名年轻的程序员正在 ...

  10. 在Winform程序中使用Spire.Pdf实现页面添加印章处理

    在一些场合,我们往往需要使用印章来给每页文档加盖一个印章,以表示该文档经过某个部门的认证的,常规的做法就是打印文档后盖章,如果需要电子档再行扫描一下.这样的的处理,如果文档很多,且仅仅需要电子文档的就 ...