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. vue 在使用数组的时候,数组内部数据发生变化,视图却没有改变

    data(){ return{ todos: [ {name: 'aa', age: 22}, {name: 'bb', age: 23} ] } } methods:{ changeTodos(){ ...

  2. 二.spring boot第一个web服务

    通过<一.spring boot初始化项目>我们已经会初始化spring boot项目,那本篇文章就说明下初始化项目的具体内容,并编写第一个Hello页面. 项目结构 mvnw.mvnw. ...

  3. 在遍历ResultSet的循环中再执行SQL会发生什么(前提:同一个Statement)

    如下面代码: Class.forName(DBParam.Driver).newInstance(); conn = DriverManager.getConnection(DBParam.DbUrl ...

  4. Java原生网络编程

    一些常见术语 编程中的Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议族隐藏在Socket接口后面 ...

  5. ubuntu安装docker-ce 、docker-ce-cli、containerd.io

    问题 ubuntu安装docker的时候特别慢,百度搜了一大堆都没讲到点子上,最后请教了大佬才知道是源的问题 安装 修改源 sudo gedit /etc/apt/sources.list 添加源 阿 ...

  6. Django 页面之间传递MySql数据表(Django八)

    之前实现了页面传递多个参数,但没有实现页面间传递一整个数据表 session传递几个参数:https://blog.csdn.net/qq_38175040/article/details/10496 ...

  7. 在windows下使用pip安装python包遇到缺失stdint.h文件的错误

    今天在windows上使用pip安装一个python包python-lzf时遇到如下的错误: fatal error C1083: Cannot open include file: 'stdint. ...

  8. 虚虚实实,亦假亦真的 ValueTuple,绝对能眩晕你

    一:背景 1. 讲故事 前几天在写一个api接口,需要对衣物表进行分页查询,查询的output需要返回两个信息,一个是 totalCount,一个是 clothesList,在以前我可能需要封装一个 ...

  9. 设计模式 | Catalog设计模式,抵御业务方需求变动

    大家好,这是一个全新的专题--设计模式. 其实可以选择的专题还有好几个,为什么选择设计模式呢?原因也很简单,首先是设计模式简单.易学.干货的文章固然好,但是普适性往往不强.另外一个很重要的点就是设计模 ...

  10. 一文带你熟悉JAVA IO这个看似很高冷的菇凉

    Java IO 是一个庞大的知识体系,很多人学着学着就会学懵了,包括我在内也是如此,所以本文将会从 Java 的 BIO 开始,一步一步深入学习,引出 JDK1.4 之后出现的 NIO 技术,对比 N ...