css-单位%号-background-size-background-position-遁地龙卷风
(-1)写在前面
我用的是chrome49，这篇是为后续做准备。重要性的调整以及毕业资料的整体导致最近没看JQuery和H5特效，以后只能晚上看了。
(0)准备
div长宽都为300px，我们一张大小小于div的图片1.jpg为例，将1.jpg设置为背景图片，添加样式background-repeat:no-repeat
(1) background-size:100% 100%;
缩放背景图片大小， background-size:100% 100%;中的%号的基值分别是div宽度和高度，所以图片会填充整个div。
(2) background-position:0% 10%;
background-position的值是%号时，基值分别是图片和div水平、高度差的绝对值，这里已垂直为例，只举例正值。
a.图片没有div大
background-size:100% 80%；那么background-position:0% 10%的作用是使图片距div上边6px,计算方式为(300-300*0.8)*0.1 =6,相当于往下推图片，所以background-position:0% 100%;总是是图片底部紧贴div底边
b.图片和div一样大
background-size:100% 100%;这里无论background-position:0% 10%；中的10%设置为什么都没有效果。
c.图片比div大
background-size:100% 120%，那么background-position:0% 10%作用是使图片距离div上边-6px，计算方式是(300*1.2-300)*0.1 = 6，相当于往上推图片。所以background-position:0% 100%;总是是图片底部紧贴div底边
(3)小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>为了生活</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
#lol
{
width:300px;
height:400px;
background-image:-webkit-linear-gradient(90deg,#be1e1e, #be9b1e, #1ebe21, #1ebeb5, #1e24be, #ba1ebe, #be1e1e);
border:1px solid red;
background-repeat:no-repeat;
background-size:100% 700%;
animation:dnf 1s infinite alternate;
}
@keyframes dnf
{
100%
{
background-position:0% 100%;
}
}
</style>
<script type="text/javascript">
</script>
</head
<body>
<div id="lol"></div>
</body>
</html>
css-单位%号-background-size-background-position-遁地龙卷风的更多相关文章
- css背景图片位置：background的position（转）
css背景图片位置:background的position position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的 1.backgroun ...
- css系列教程--border和background
css标签b:1.background:用法 background:可以指定颜色,背景,平铺效果以及背景定位.background:url(aa.png) #fff 0px 0px no-repeat ...
- rem — 一个低调的css单位
原文 http://www.zhaoan.org/1825.html rem这是个低调的 css 单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃 ...
- 你可能没注意的CSS单位
扶今追昔 CSS中的单位我们经常用到px.pt.em.百分比,px和pt不用多说 em em是相对单位,参考物是父元素的font-size,具有继承的特点 如果字体大小是16px(浏览器的默认值),那 ...
- 移动端css单位之 “vh” & “vw”
一.前言: 响应式web设计离不开百分比.但是,CSS百分比并不是所有的问题的最佳解决方案.CSS的宽度是相对于包含它的最近的父元素的宽度的.但是如果你就想用视口(viewpoint)的宽度或者高度, ...
- CSS 中，用 float 和 position 的区别是什么？
CSS 中,用 float 和 position 的区别是什么? 呃,其实这个命题有误,只有position才是定位,float不能说是定位,不过你可以说这两种布局方式有什么不同.float和posi ...
- 你可能不知道的7个CSS单位
如果你是一名前端开发工程师,一般px和em使用频率比较高.但是今天本文的重点是介绍一些我们使用很少.甚至么有听说的单位. 一.重温em <style type="text/css&qu ...
- 七个你可能不了解的CSS单位
我们很容易无法摆脱的使用我们所熟悉的CSS技术,当新的问题出现,这样会使我们处于不利的地位. 随着Web继续的发展,对新的解决方案的需求也会继续增大.因此,作为网页设计师和前端开发人员,我们别无选择, ...
- css单位盘点
css单位有:px,em,rem,vh,vw,vmin,vmax,ex,ch 等等 1.px单位最常见,也最直接,这里不做介绍. 2.em:em的值并不是固定,它继承父级元素的字体大小,所以层数越深字 ...
- 学习网页制作中如何在正确选取和使用 CSS 单位
在 CSS 测量系统中,有好几种单位,如像素.百分比.英寸.厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...
随机推荐
- CF444C. DZY Loves Colors[线段树 区间]
C. DZY Loves Colors time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- oracle连接方式、创建数据库用户、忘记数据库密码、用户锁定
一.oracle六种连接方式 ①myEclipse中 打开myEclipse,window----show view----Other---输入DB点击DB browser 选中右键New.出现如下页 ...
- CHM打不开的解决方法
CHM打不开的解决方法 听语音 | 浏览:62240 | 更新:2013-02-04 14:58 | 标签:软件 1 2 3 4 5 6 分步阅读 一键约师傅 百度师傅高质屏和好师傅,拯救你的碎屏机 ...
- DbContext 和ObjectContext两者的区别
http://blog.csdn.net/lvjin110/article/details/24642911 ObjectContext是一种模型优先的开发模式,DbContext是代码优先的开发模式 ...
- VS一直停留在“正在还原nuget程序包”
VS一直停留在“正在还原nuget程序包” 在开发何问起收藏夹的时候,准备在WinFrom中加入网页浏览器,于是下载了一个CEFSharp的源码,生成解决方案的时候,一直提示“正在还原nuget程序包 ...
- Highcharts——让你的网页上图表画的飞起
Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图.柱状图.饼图.散点图等多达 ...
- JavaScript语法规范
推荐的JavaScript编码规范 阅读 247 评论 0 喜欢 0 作为前端开发人员,我相信每一个人都或多或少的用到原生的JavaScript,也正是因为用的人多,导致编码风格也是多种多样的,而不规 ...
- 正确遍历ElasticSearch索引
1:ElasticSearch的查询过程 2:由ES查询模式引起的深度分页问题 3:如何正确遍历索引中的数据 ElasticSearch的查询过程 es的数据查询分两步: 第一步是的结果是获取满足查询 ...
- 【BZOJ-1570】BlueMary的旅行 分层建图 + 最大流
1570: [JSOI2008]Blue Mary的旅行 Time Limit: 15 Sec Memory Limit: 162 MBSubmit: 388 Solved: 212[Submit ...
- 使用Maven Assembly plugin将依赖打包进jar
一个Eclipse的工程,在pom中配置了若干依赖,需要将pom中所有的依赖全部打包进一个jar包中,可以选择的方案有maven-assembly-plugin和fatjar.以前采用fatjar进行 ...