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 ...
随机推荐
- Python - 面对对象(基础)
目录 Python - 面对对象(基础) 一. 概述 二. 创建类和对象 三. 面向对象三大特征 封装 继承 多态 Python - 面对对象(基础) 一. 概述 面向过程:根据业务逻辑从上到下写垒代 ...
- Linux - redis哨兵集群实例
目录 Linux - redis哨兵集群实例 命令整理 配置流程 Linux - redis哨兵集群实例 命令整理 官网地址:http://redisdoc.com/ redis-cli info # ...
- hdu 3500 DFS(限定)
Fling Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others)Total Submi ...
- PAT 1100. Mars Numbers
People on Mars count their numbers with base 13: Zero on Earth is called "tret" on Mars. T ...
- 【codeforces 761E】Dasha and Puzzle
[题目链接]:http://codeforces.com/contest/761/problem/E [题意] 给你一棵树,让你在平面上选定n个坐标; 使得这棵树的连接关系以二维坐标的形式展现出来; ...
- [CSS3] Use Sticky Positioning for Section Headers
We can take advantage of sticky positioning to keep a section header at the top of the page while th ...
- C语言函数--H
函数名: harderr 功 能: 建立一个硬件错误处理程序 用 法: void harderr(int (*fptr)()); 程序例: /*This program will trap disk ...
- VC问题 IntelliSense:“没有可用的附加信息”，[请參见“C++项目 IntelliSense 疑难解答”，获得进一步的帮助]
在XP上安装VS2010 后发现 IntelliSense不能使用,但在Windows7上是能够正常使用这功能的.关于IntelliSense不能使用的问题已有网友提出了是由于KB2876217这个补 ...
- mysql 忘记了root的password(linux下解决方法，window同理)
mysql 忘记了root的password的时候的解决步骤, 1: cd /etc/mysql/(进入mysql的配置文件夹) 2:vim my.cnf \skip-grant-tables(进入m ...
- ASP环境下轻松实现报表的打印 (转）
作者:zcg2000 一.前言 ASP在电子商务上应用广泛,报表的处理又有一些麻烦.本文介绍了在ASP中利用 本人写的Report Server Page脚本解释器实现报表的显示.打印. 二.准备工作 ...