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 ...
随机推荐
- Linux之iptables(四、网络防火墙及NAT)
网络防火墙 iptables/netfilter网络防火墙: (1) 充当网关 (2) 使用filter表的FORWARD链 注意的问题: (1) 请求-响应报文均会经由FORWARD链,要注意规则的 ...
- Windows Phone开发（18）：变形金刚第九季
变换不是一个好理解的概念,不是吓你,它涉及很多有关代数,几何,以及线性代数的知识.怎么?被我的话吓怕了?不用怕,尽管我们未必能够理解这些概念,只要我们知道怎么使用它们就是了.其实,变换就是平面上一种坐 ...
- Flask - 内置Session
目录 Flask - 内置Session 基本用法 给视图添加装饰器验证 Flask - 内置Session Flask中的Session非常的奇怪,他会将你的SessionID存放在客户端的Cook ...
- PAT 1060. Are They Equal
If a machine can save only 3 significant digits, the float numbers 12300 and 12358.9 are considered ...
- Java基础学习总结（36）——Java注释模板
代码注释是对代码设计者.代码阅读者以及系统间调用提供了有效的帮助,最大限度的提高团队开发合作效率增强系统的可维护性.我们追求简化,不是为了写注释而写注释. (快速使用请直接看六.七.八) 一.原则: ...
- xth的第 12 枚硬币（codevs 1366）
题目描述 Description 传说 xth 曾经拥有11枚完全相同硬币(你懂得),不过今年呢,rabbit又送了他一 枚硬币.这枚硬币和其他硬币外观相同,只有重量不同,或轻或重.Xth 一不小心, ...
- [转]十五天精通WCF——第七天 Close和Abort到底该怎么用才对得起观众
一:文起缘由 写这一篇的目的源自于最近看同事在写wcf的时候,用特别感觉繁琐而且云里雾里的嵌套try catch来防止client抛出异常,特别感觉奇怪,就比如下面的代码. public void S ...
- BZOJ 1492 货币兑换 cdq分治或平衡树维护凸包
题意:链接 方法:cdq分治或平衡树维护凸包 解析: 这道题我拒绝写平衡树的题解,我仅仅想说splay不要写挂,insert边界条件不要忘.del点的时候不要脑抽d错.有想写平衡树的去看140142或 ...
- MySql免安装版l配置方法
初次接触mysql,折腾了一天,总是安装不成功,服务启动不了.后来从官网下载了ZIP Archive版,不用安装,直接把它解压到磁盘,做一些简单的配置就可以. 软件下载地址:http://dev.my ...
- Smobiler实现列表展示—GridView（开发日志十二）
一.列表功能展示 二.具体步骤 2.1,列表控件设计部分 2.1-① 在窗口SmoiblerForm1中加入gridview控件 2.1-② 在属性栏设置gridview控件的大小和位置 ...