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 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...
随机推荐
- POJ3398Perfect Service[树形DP 树的最大独立集变形]
Perfect Service Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 1518 Accepted: 733 De ...
- 使用python实现appium的屏幕滑动
前些日子写一个滑动手机页面的小脚本,看到大家给的内容都是swipe方法,这里对swipe方法做一个小介绍: Swipe(int start x,int start y,int end x,int y, ...
- Centos6安装Gitlab
安装参考 https://about.gitlab.com/downloads/ 可以从清华的镜像下载安装包, 注意区分自己用的是哪个发行版 https://mirror.tuna.tsinghua. ...
- windows7配置Nginx+php+mysql教程
windows7配置Nginx+php+mysql教程 最近在学习php,想把自己的学习经历记录下来,并写一些经验,仅供参考交流.此文适合那些刚刚接触php,想要学习并想要自己搭建Nginx+php+ ...
- 电改：OPower资料调研
0.简介 power公司是于 2007 年创办,是全球领先的家庭能源管理企业.家庭能源数据分析公司.Opower 与公用电力公司合作,抢占家庭消费者"入口",获取家庭消费者 ...
- linux下，Python 多版本共存，及Pip，Easy_install 安装扩展包
Python2与Python3共存 安装Python3后,建立ln,使用Python(Python2),Python3 来区分两个版本 使用sudo apt-get install python3-s ...
- PHP 常用框架
1.ThinkPHP 2.Yii2 3.Laravel 4.CodeIgniter 5.CakePHP
- jquery-leonaScroll-1.1-自定义滚动条插件
leonaScroll-1.1最新版-竖向 leonaScroll-1.1.js欢迎使用leonaScroll-1.1.js,此滚动条仅支持竖向滚动,如您在使用过程中发现更多问题,欢迎指正! 更新:1 ...
- 浅谈php生成静态页面
一.引 言 在速度上,静态页面要比动态页面的比方php快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存相关信息的话,整体的管理上比较繁琐,比方修改编辑.比方阅读权 ...
- 前端ps常用的小技巧
一些很简单的例子,知道的就当看乐子. 1.T 是文字的 可以从矢量图中查看文字的大小 字体 颜色,具体就是T 选择一段文字,点确定,点击属性栏最后一个可以看详细信息.又字体,行高,颜色.如果要选取 ...