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 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...
随机推荐
- Python的列表推导式，字典推导式，集合推导式使用方法
推导式分为列表推导式(list),字典推导式(dict),集合推导式(set)三种 1.列表推导式也叫列表解析式.功能:是提供一种方便的列表创建方法,所以,列表解析式返回的是一个列表格式:用中括号括起 ...
- Java 线程同步
线程同步 1.线程同步的目的是为了保护多个线程访问一个资源时对资源的破坏. 2.线程同步方法是通过锁来实现,每个对象都有切仅有一个锁,这个锁与一个特定的对象关联,线程一旦获取了对象锁,其他访问该对象的 ...
- 一个仿windows泡泡屏保的实现
一个仿windows泡泡屏保的实现 有天看到有人在百度知道上问windows 泡泡屏保该怎么用C#做,一时有趣,就做了一个出来,对于其中几个要点总结如下: 一,屏保程序的制作要求 屏保程序的扩展名是. ...
- FPGA与simulink联合实时环路系列——实验一 测试
实验一 测试 实验内容 在simulink创建测试模块,通过测试模块产生信号,再传送到FPGA,FPGA读出后再将信号无处理传送回simulink进行显示.由此来测试整个硬件在环的功能是否正常,并且熟 ...
- Codeforces Canda Cup 2016
A.B:模拟 C.构造下就行了 D.题意:n个参加ACM的队(n<=300000),每个队都有自己的初始气球数和重量,规定如果气球数>重量,那么此队就会飞起来,淘汰出局,你现在是第一组,你 ...
- 持续集成（Continuous integration）
docker +jenkins + gitosc 到gitosc上,复制地址:https://git.oschina.net/99fu/CI.git 进入到 /home/fu git clone ...
- 延迟容忍网络(Delay-tolerant networking)
标签: 网络networking存储工作network路由器 2012-03-24 10:01 3702人阅读 评论(0) 收藏 举报 分类: 计算机网络(12) 版权声明:本文为博主原创文章,对文章 ...
- MongoDB的基本操作
环境:CentOS6.8 Mongodb3.2.10 启动 启动mongoDB服务器 # service mongod start 启动mongoDB客户端 # mongo 该客户端是一个JavaS ...
- linux进阶1
1.linux命令 1.1.find功能:在linux文件系统中,用来查找一个文件放在哪里了.举例:find /etc -name "interfaces"总结:(1)什么时候用f ...
- android 自定义Style初探－－－ProgressBar
系统自带的ProgressBar太丑了,所以我决定自定义一个Style. 原来的Style <?xml version="1.0" encoding="utf-8& ...