(-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. NOIP2012国王游戏

      题目描述 恰逢 H 国国庆,国王邀请 n 位大臣来玩一个有奖游戏.首先,他让每个大臣在左.右 手上面分别写下一个整数,国王自己也在左.右手上各写一个整数.然后,让这 n 位大臣排 成一排,国王站在 ...

  2. UNITY自带的3D object没有三角形？

    有方形,圆形,圆柱,胶囊,就是没有三角形? 这里看代码如何创建mesh http://www.narkii.com/club/thread-369573-1.html http://www.taikr ...

  3. VS 常用高效 快捷键

    强迫智能感知:Ctrl+J.智能感知是Visual Studio最大的亮点之一,选择Visual Studio恐怕不会没有这个原因. 2 撤销:Ctrl+Z.除非你是天才,那么这个快捷键也是最常用的. ...

  4. BIOS设置和CMOS设置的区别与联系

    BIOS是主板上的一块EPROM或EEPROM芯片,里面装有系统的重要信息和设置系统参数的设置程序(BIOS Setup程序): CMOS是主板上的一块可读写的RAM 芯片,里面装的是关于系统配置的具 ...

  5. Apache Shiro系列三，概述 —— 10分钟入门

     一.介绍 看完这个10分钟入门之后,你就知道如何在你的应用程序中引入和使用Shiro.以后你再在自己的应用程序中使用Shiro,也应该可以在10分钟内搞定. 二.概述 关于Shiro的废话就不多说了 ...

  6. ROS系统C++代码测试之gtest

    1. 安装gtestsudo apt-get install libgtest-dev 2.修改CMakeLists.txtfind_package(GTest REQUIRED)uncommend ...

  7. Linux命令 -- 查看系统版本的各种方法

    适用于CentOS

  8. jQuery Colorpicker Spectrum api 中文 文档 属性 事件 方法

    jQuery Colorpicker Spectrum 所需的CSS和JavaScript文件: <script src='spectrum.js'></script> < ...

  9. 选择QT作为自己的图形库

    图形库太多,公司里面一直使用自己的图形库,换一家公司,就换个图形库,现在公司没有对我开放图形库代码. 想来想去还是自己要有一套图形库,拿来主义最方便,选来选去感觉还是QT比较方便.同时能学习一下C++ ...

  10. 标准C++之运算符重载和虚表指针

    1 -> *运算符重载 //autoptr.cpp     #include<iostream> #include<string> using namespace std ...