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 ...
随机推荐
- models中，字段参数limit_choices_to的用法
这里,在使用 ModelForm 渲染前端页面的前提下,对于 models 中的 ManyToManyField 类型字段会在 ModelForm 中被转化为 ModelMultipleChoiceF ...
- JS练习：显示和隐藏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Linux - redis主从同步
目录 Linux - redis主从同步 环境准备 配置主从同步 测试写入数据,主库写入数据,检查从库数据 手动进行主从复制故障切换 Linux - redis主从同步 原理: 从服务器向主服务器发送 ...
- Django REST framework - 权限和限制
目录 Django REST framework 权限和限制 (你能干什么) 设置权限的方法 案例 第一步: 定义一个权限类 第二步: 使用 视图级别 全局级别设置 --- 限制 (你一分钟能干多少次 ...
- 《零压力学Python》 之 第四章知识点归纳
第四章(决策和循环)知识点归纳 if condition: indented_statements [ elif condition: Indented_statements] [else: Inde ...
- 腾讯云,搭建nginx静态网站服务器
搭建Http静态服务器环境 任务时间:15min ~ 30min 搭建静态网站,首先需要部署环境.下面的步骤,将告诉大家如何在服务器上通过 Nginx 部署 HTTP 静态服务. 安装 Nginx 在 ...
- Java Web项目实战第1篇之环境搭建
写在前面的话 从今天开始一个Java Web实战项目,参考自 http://blog.csdn.net/eson_15/article/details/51277324 这个博客(非常感谢博主的分享精 ...
- 【codeforces 527B】Error Correct System
[题目链接]:http://codeforces.com/contest/527/problem/B [题意] 给你两个字符串; 允许你交换一个字符串的两个字符一次: 问你这两个字符串最少会有多少个位 ...
- （39.1） Spring Boot Shiro权限管理【从零开始学Spring Boot】
(本节提供源代码,在最下面可以下载)距上一个章节过了二个星期了,最近时间也是比较紧,一直没有时间可以写博客,今天难得有点时间,就说说Spring Boot如何集成Shiro吧.这个章节会比较复杂,牵涉 ...
- static 语句块
static{}(即static块),会在类被加载的时候执行且仅会被执行一次,一般用来初始化静态变量和调用静态方法,下面我们详细的讨论一下该语句块的特性及应用. 一.在程序的一次执行过程中,stati ...