(-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-遁地龙卷风的更多相关文章

  1. css背景图片位置：background的position（转）

    css背景图片位置:background的position   position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的 1.backgroun ...

  2. css系列教程--border和background

    css标签b:1.background:用法 background:可以指定颜色,背景,平铺效果以及背景定位.background:url(aa.png) #fff 0px 0px no-repeat ...

  3. rem — 一个低调的css单位

    原文  http://www.zhaoan.org/1825.html rem这是个低调的 css 单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃 ...

  4. 你可能没注意的CSS单位

    扶今追昔 CSS中的单位我们经常用到px.pt.em.百分比,px和pt不用多说 em em是相对单位,参考物是父元素的font-size,具有继承的特点 如果字体大小是16px(浏览器的默认值),那 ...

  5. 移动端css单位之 “vh” & “vw”

    一.前言: 响应式web设计离不开百分比.但是,CSS百分比并不是所有的问题的最佳解决方案.CSS的宽度是相对于包含它的最近的父元素的宽度的.但是如果你就想用视口(viewpoint)的宽度或者高度, ...

  6. CSS 中，用 float 和 position 的区别是什么？

    CSS 中,用 float 和 position 的区别是什么? 呃,其实这个命题有误,只有position才是定位,float不能说是定位,不过你可以说这两种布局方式有什么不同.float和posi ...

  7. 你可能不知道的7个CSS单位

    如果你是一名前端开发工程师,一般px和em使用频率比较高.但是今天本文的重点是介绍一些我们使用很少.甚至么有听说的单位. 一.重温em <style type="text/css&qu ...

  8. 七个你可能不了解的CSS单位

    我们很容易无法摆脱的使用我们所熟悉的CSS技术,当新的问题出现,这样会使我们处于不利的地位. 随着Web继续的发展,对新的解决方案的需求也会继续增大.因此,作为网页设计师和前端开发人员,我们别无选择, ...

  9. css单位盘点

    css单位有:px,em,rem,vh,vw,vmin,vmax,ex,ch 等等 1.px单位最常见,也最直接,这里不做介绍. 2.em:em的值并不是固定,它继承父级元素的字体大小,所以层数越深字 ...

  10. 学习网页制作中如何在正确选取和使用 CSS 单位

    在 CSS 测量系统中,有好几种单位,如像素.百分比.英寸.厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...

随机推荐

  1. CodeForces 485C Bits[贪心 二进制]

    C. Bits time limit per test1 second memory limit per test256 megabytes inputstandard input outputsta ...

  2. Win10 Sql2008R2 在关闭【0x80041033】

    以前SQL Server 2008 不能登陆的时候,总是通过“计算机管理”→“SQL Server服务”更改一下,"SQL Server(MSSQLSERVER)".可是现在出现的 ...

  3. codevs 1536 海战

    时间限制: 1 s  空间限制: 256000 KB  题目等级 : 白银 Silver 题目描述 Description 在峰会期间,武装部队得处于高度戒备.警察将监视每一条大街,军队将保卫建筑物, ...

  4. Python-03-基础

    一.集合 集合(set)是一个无序的.不重复的元素组合,它的主要作用如下: 去重:把一个列表变成集合,就会自动去重. 关系测试:测试两组数据之前的交集.差集.并集等关系. 常用操作 # 创建数值集合 ...

  5. flask+sqlite3+echarts3 系统监控

    总的而言,分三部分: 1.监控器(monitor.py): 每秒获取系统的四个cpu的使用率,存入数据库. 2.路由器(app.py): 响应页面的ajax,获取最新的一条或多条数据. 3.页面(in ...

  6. 你一无所知的CSS

    也许标题有点夸大了.虽然不能完全保证大家都不知道这些,但是这也算是一个好机会检测下你是否知道或使用过下面的内容. Selectors Root :root { }  使用root可以让你在DOM中选择 ...

  7. 2016-2017-2 《Java程序设计》课程学生博客和代码托管链接

    2016-2017-2 <Java程序设计>课程学生博客和代码托管链接 博客 1552 20155201 李卓雯 20155202 张 旭 20155203 杜可欣 20155204 王 ...

  8. viewport就是这回事

    前言 对于移动webapp开发人员来说,viewport是个很重要的东西,容易用但很多时候都是不明白的,于是我决心去弄清楚它. <meta name="viewport" c ...

  9. redis主从同步

    本文是在window环境下的主从同步 1.redis是如何实现主从同步的 redis会周期性的把更新的数据写入磁盘或者把修改操作写入追加的记录文件,并且在此基础上实现了master-slave(主从) ...

  10. MongoDB学习笔记一

    操作系统:Windows7 1.下载MongoDB 2.6.5服务端,并安装 网址:http://pan.baidu.com/s/1dDfoJAh 说明:网上很多都不需要安装的,这个需要安装. 2.添 ...