background-size值为cover和值为100%的区别
时间:2019-12-05
本文章向大家介绍background-size值为cover和值为100%的区别,主要包括background-size值为cover和值为100%的区别使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
background-size:100% 100%;---按容器比例撑满,图片变形;
background-size:cover;---把背景图片放大到适合元素容器的尺寸,图片比例不变。
IE8及以下版本用滤镜来兼容background-size如下:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale');}
下面我通过给下图背景图添加background-size属性的不同属性值,更直观的显示出100%和cover的区别
下图是添加background-size:100% 100% 后的背景图效果,背景图被拉伸后有点失真
下图是添加background-size: cover 后的背景图效果,背景图被拉伸后背景图不能全部显示
它们的区别:
background-size:100% 100%把背景图进行横向和纵向的拉伸,图片比例随之改变,
可能导致图像失真(建议让UI给原始背景图,否则容易出现图片拉伸后失真)
background-size: cover把背景图扩展至足够大,直至完全覆盖背景区域,
图片比例保持不变且不会失真,但某些部分被切割无法显示完整背景图像
原文地址:https://www.cnblogs.com/chenyablog/p/11988249.html
- phalcon-入门篇9(view层基础使用)
- PhalApi视频教程
- 【学术】一文搞懂自编码器及其用途(含代码示例)
- PhalApi-Zip--压缩文件处理类
- PhalApi-Xhprof -- Facebook开源的轻量级PHP性能分析工具
- OpenAI发布8个模拟机器人环境以及一种HER实现,以训练实体机器人模型
- PhalApi-APK--APK文件解包处理
- [喵咪PHP]页面显示空白问题
- 数据库中间件 Sharding-JDBC 源码分析 —— 结果归并
- PhalGo-Request
- PhalApi-Excel
- PhalGo-Viper获取配置
- Dubbo 源码解析 —— 集群容错架构设计
- PhalGo-ADM思想
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- spring-boot-route(七)整合jdbcTemplate操作数据库
- Pytorch 卷积中的 Input Shape用法
- 解决TensorFlow程序无限制占用GPU的方法
- 基于Python的自媒体小助手—登录页面的实现代码
- PHP addAttribute()函数讲解
- PHP PDOStatement::setAttribute讲解
- PHP中的访问修饰符简单比较
- PHP asXML()函数讲解
- PhpStorm配置Xdebug调试的方法步骤
- python字典的值可以修改吗
- 使用Keras构造简单的CNN网络实例
- Python接口测试环境搭建过程详解
- 使用已经得到的keras模型识别自己手写的数字方式
- 解决keras使用cov1D函数的输入问题
- PHP PDOStatement::getColumnMeta讲解