div 背景放图和直接放图区别
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 10px;
padding: 10px; }
/*背景插入图片，contain设定使图片在div框中完全显示，不受div框大小影响*/
.a{
width: 200px;
height: 200px;
border: 1px solid black;
background-image: url(tupian/y1.png);
background-repeat: no-repeat;
background-size: contain;
}
.b{
width: 200px;
height: 100px;
border: 1px solid black;
background-image: url(tupian/y1.png);
background-repeat: no-repeat;
background-size: contain;
}
/*背景图片设定，cover 100% 图片横向符合div框大小，固定比例变化图片，可能显示不全*/
.c{
width: 200px;
height: 100px;
border: 1px solid black;
background-image: url(tupian/y1.png);
background-repeat: no-repeat;
background-size: cover;
}
.d{
width: 200px;
height: 100px;
border: 1px solid black;
background-image: url(tupian/y1.png);
background-repeat: no-repeat;
background-size: 100%;
}
.e{
width: 200px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"> </div>
<div class="c"></div>
<div class="d"></div>
<div class="e">
<img src="tupian/y1.png" />
</div>
</body>
</html>
div 背景放图和直接放图区别的更多相关文章
- 多个div背景图无缝拼接
公司在做环形进度条的时候遇到了这个问题,上网一搜,原来是因为两个div背景图拼接起来的,所以中间出现了必不可少的缝隙,最后把position改为relative,再加个margin:0,就解决好了,下 ...
- body和普通div背景图宽高百分比的区别
body和普通div背景图的区别 background: url(//m.360buyimg.com/mobilecms/s220x220_jfs/t2746/167/831241799/29915 ...
- PS-前端切图教程（切jpg图和切png图）
微微一运功,把家底都抖出来了. 不过,作为一个设计出身的前端来说,摸ps就和摸键盘一样了 所以可能教程中还是有没用过ps的人看不懂的地方, 欢迎加群讨论:613512106... ---------- ...
- KRPano资源分析工具使用说明（KRPano XML/JS解密 切片图批量下载 球面图还原 加密混淆JS还原美化）
软件交流群:571171251(软件免费版本在群内提供) krpano技术交流群:551278936(软件免费版本在群内提供) 最新博客地址:blog.turenlong.com 限时下载地址:htt ...
- 【UML 建模】UML建模语言入门 -- 静态图详解 类图 对象图 包图 静态图建模实战
发现个好东西思维导图, 最近开始用MindManager整理博客 . 作者 :万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/deta ...
- Android绘图机制（四）——使用HelloCharts开源框架搭建一系列炫酷图表，柱形图，折线图，饼状图和动画特效，抽丝剥茧带你认识图表之美
Android绘图机制(四)--使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美 这里为什么不继续把自定义View写下去呢,因为最近项目 ...
- 【Excel】绘图案例_常见复合图：簇状图+堆积图+折线图
前言 最近有朋友让我帮忙用excel画图,老实说我很讨厌用excel画图,点来点去,复杂一些还不能复用,非常繁琐.当然,入门也很简单.需求时不同城市.不同产品的2016和2017销量及环比数据,这应该 ...
- UML建模语言入门 -- 静态图详解 类图 对象图 包图 静态图建模实战
发现个好东西思维导图, 最近开始用MindManager整理博客 . 作者 :万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/deta ...
- 图床plus演示 | 图床及在线分享演示文稿工具
文章目录 关于图床 什么是图床? 墙内 墙外 关于在线分享演示文稿 在线分享演示文稿 工具分享 待补充 关于图床 什么是图床? 这并不是一个多么高大上的名词概念!用比较通俗的话来说,当你在撰写新文章时 ...
- web中切图、快速切图与web雪碧图制作的方法
声明: web小白的笔记,欢迎大神指点,联系QQ:1522025433. 工具:Photoshop 1.复制文字:点击文章工具后选择文字. 2.矩形选框工具 看信息 f8, 取消矩形选框 Ctrl+D ...
随机推荐
- Laravel实用小功能
Laravel实用小功能 1.控制访问次数 laravel5.2的新特性,通过中间件设置throttle根据IP控制访问次数 原理:通过回传三个响应头X-RateLimit-Limit,X-RateL ...
- linux 头文件和库文件的设置
GCC/G++会查找系统默认的include和link的路径,以及自己在编译命令中指定的路径.自己指定的路径就不说了,这里说明一下系统自动搜索的路径. [1]include头文件路径 除了默认的/us ...
- 创建序列化器，序列化管理器，closureSerializer
创建序列化器,序列化管理器,closureSerializer //通过反射创建序列化对象 // Create an instance of the class with the given name ...
- fzu 2124
#include<stdio.h> #include<queue> #include<math.h> #include<algorithm> #incl ...
- [tsA1491][2013中国国家集训队第二次作业]家族[并查集]
m方枚举,并查集O(1)维护,傻逼题,,被自己吓死搞成神题了... #include <bits/stdc++.h> using namespace std; struct tri { i ...
- 【学QT】2 - QT/E环境的建立
Arm-Linux嵌入式QT/E环境的建立(qt/e 3.x系列) QT/E 3.x系列比QT/E 2.x系列有非常大的改进,大大提高了开发进度,不再使用tmake,安装也更简单.但 ...
- nyoj_448_寻求最大数_201402261424
寻找最大数 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 请在整数 n 中删除m个数字, 使得余下的数字按原次序组成的新数最大, 比如当n=920 ...
- nyoj_102_次方求模_201308221547
次方求模时间限制:1000 ms | 内存限制:65535 KB 难度:3描述 求a的b次方对c取余的值 输入 第一行输入一个整数n表示测试数据的组数(n<100)每组测试只有一行,其中有三 ...
- Expanding Rods POJ 1905 二分
Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 17050 Accepted: 4503 Description When ...
- HDU 5242 上海大都会 G题
这道题其实是求K条最长的不重叠的链.贪心算法+DFS即可求.深度优先搜索时,返回当前子树的最长链,使用优先队列保存其他孩子结点的最长链,即可.求结果时只需从优先队列中取前K个值的和.这相当于暴力删除每 ...