(-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. MySQL 笔记2

    -- *************一.数据约束********************---- -- 1.1 默认值 CREATE TABLE student( id INT, NAME ), addr ...

  2. VPS搭建VPN、BLOG

    FQ的正确姿势,你掌握了多少?老司机带你去墙外看看,来开车了坐稳! 购买VPS主机(服务端) 推荐性价比较高的VPS 搬瓦工https://bandwagonhost.com/ 上面的链接如果你打不开 ...

  3. ubuntu14.04为安装fcitx卸载ibus后出现system setting (系统设置)中图标消失的问题

    最近在系统为ubuntu14．04原版中,安装fictx.按照以往的经验应先把ibus卸载干净,否则可能会有冲突.因此惯性思维驱使,先卸载ibus,然后安装fcitx,但是问题出现了,system s ...

  4. 国内外前端(js)开发框架对比

    国内外前端开发框架对比 首先我们先对目前国内外主流前端开发框架做一个基本的了解,之后再对他们进行一个直观的对比. Bootstrap Bootstrap(http://www.bootcss.com) ...

  5. JS组件系列——封装自己的JS组件，你也可以

    前言:之前分享了那么多bootstrap组件的使用经验,这篇博主打算研究下JS组件的扩展和封装,我们来感受下JQuery为我们提供$.Extend的神奇,看看我们怎么自定义自己的组件,比如我们想扩展一 ...

  6. 《DOM Scripting》 - 阅读笔记

    DOM Scripting - Web Design with JavaScript and the Document Object Model,Jeremy Keith中文名:JavaScript ...

  7. CDH安装

    离线安装Cloudera Manager 5和CDH5(最新版5.1.3) 完全教程 关于CDH和Cloudera Manager CDH (Cloudera's Distribution, incl ...

  8. Android Studio22-NDK-LLDB调试

    Android Studio2.2更好的支持NDK开发,并可以像开发java一样的DEBUG程序,不需要添加gradle-experimental插件,就可调试代码! 一,下载 NDK 和构建工具 要 ...

  9. redis-windows免安装版本安装多个redies

    1.复制两份redis:端口分别为6369和6379 2.修改端口 6379为redis默认的端,不改; 进入6369的下面找到如下配置文件: redis.conf 修改端口 然后分别启动redis- ...

  10. C#中中文编码的问题（StreamWriter和StreamReader默认编码）

    在使用StreamWriter和StreamReader时产生了这样的疑问,在不指定的情况下,他们使用什么编码方式? 查看MSDN,请看下图: 注意红色区域  这让我以为构造函数参数不同时使用不一样的 ...