background-size 详解
backgroun-size:cover;
.是按照等比缩放铺满整个区域。主要用于图片比div小的时候,将图片按照某一边的比例扩大以填充整个div背景。
.优点:图片不会被拉升,且实用于div长度和宽度的比例合适时候
.缺点:图片会失真,且当宽度和高度比例过大时候,会出现图片显示不全。
backgroun-size:contain:
.也是等比缩放,按照某一边来覆盖显示区域的,会有白边。
.优点:图片不会拉升,且适用于图片比div大时候。
.缺点:有白边
background-size:100% 100%;
.长宽100%显示,可能会拉升图片。
.优点:能使得图片完全在div中显示出来。
.缺点:可能造成图片拉升和失真。
background-size 详解的更多相关文章
- CSS中background属性详解
CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...
- CSS background 属性详解
CSS background Property 语法: background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-cl ...
- 【转载】sizeof()、strlen()、length()、size()详解和区别
c/c++中获取字符串长度.有以下函数:size().sizeof() .strlen().str.length();一.数组或字符串的长度:sizeof().strlen()1.sizeof():返 ...
- css样式之background详解
background用法详解: 1.background-color 属性设置元素的背景颜色 可能的值 color_name 规定颜色值为颜色名称的背景颜色(比如 red) he ...
- css样式之background详解(格子效果)
background用法详解: 1.background-color 属性设置元素的背景颜色 可能的值 color_name 规定颜色值为颜色名称的背景颜色(比如 red) he ...
- CSS背景属性Background详解
[转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...
- HTTPS 传输优化详解之动态 TLS Record Size
笔者在过去分析了诸多可以减少 HTTPS 传输延迟的方法,如分布式 Session 的复用: 启用 HSTS,客户端默认开启 HTTPS 跳转:采用 HTTP/2 传输协议:使用 ChaCha20-P ...
- 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]$ ...
- css详解background八大属性及其含义
background(背景) 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由 元素外边距(margin).元素边框(border).元素内边距(padding)和元素内容(c ...
- CSS3详解:background
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
随机推荐
- 2020JavaWeb实现文件下载
Servlet实现文件下载: package com.demo.test; import org.apache.commons.io.IOUtils; import javax.servlet.Ser ...
- element.ui 自定义样式问题
方法有很多种 自定义类名 <el-button class="search_button" @click="search">查询</el-bu ...
- jackson读取json tree讲解
待读取的json文本: {"data":{"count":4031,"list":[{"symbol":"SH ...
- 20190923-07Linux搜索查找类 000 015
find 查找文件或者目录 find指令将从指定目录向下递归地遍历其各个子目录,将满足条件的文件显示在终端. 1.基本语法 find [搜索范围] [选项] 2.选项说明 表1-27 选项 功能 -n ...
- Ubuntu 安装配置 WordPress5.4.2
一.安装 Apache 并配置 WordPress sudo apt-get install apache2 -y // 安装 apache2 sudo apt-get install php -y ...
- 文件操作和OS模块的简单操作
文件的作用 大家应该听说过一句话:“好记性不如烂笔头”. 不仅人的大脑会遗忘事情,计算机也会如此,比如一个程序在运行过程中用了九牛二虎之力终于计算出了结果,试想一下如果不把这些数据存放起来,相比重启电 ...
- 第2课 - Hello, DTOS!
第2课 - Hello, DTOS! 1. 主引导程序 主引导程序是软件还是固件?如果是软件,那么由谁开发?如何开发? (1)上一节说到了固件和软件的区别.由于主引导程序没有在出厂前固化到硬件中,因此 ...
- NoSuchMethodError: org.springframework.beans.factory.config.BeanDefinition.getResolvableType
spring整合Mybatis报错: 解决方法: 检查maven依赖中的spring-jdbc和spring-webmvc是否版本一致 以下均为5.2.0.RELEASE版本 除此之外再检查是否有其他 ...
- 【Flutter 实战】文件系统目录
老孟导读:Flutter 中获取文件路径,我们都知道使用 path_provider,但对其目录对含义不是很清楚,此文介绍 Android.iOS 系统的文件目录,不同场景下建议使用的目录. 不同的平 ...
- python常用os模块
OS 模块 #os模块就是对操作系统进行操作,使用该模块必须先导入模块: import os #getcwd() 获取当前工作目录(当前工作目录默认都是当前文件所在的文件夹) result = os. ...