background position

background position相关知识

• web前端-CSS3属性学习（2）-背景属性（Background）

  W3C中第二部分为背景属性（Background），共列举9个属性：background、background-attachment、background-color、background-image、background-position、background-repeat、background-clip、background-origin、background-size。背景属性在CSS中运用广泛，目前各大浏览器都支持9个属性。详细学习： http://www.w3school.com.cn/cssref/index.asp。 下为简单介绍： - 兼容性 background、background-attachment、background-color、background-image、background-position、background
• CSS3实现红心点赞特效

  1.创建html<view class="feed" bindtap='addAnimateFun' id="feed1"><view class="heart {{addAnimate}}" id="like1" rel="like" style="background-position: {{cssAnimate}} center;"></view></view>2. css.heart {background: url(http://demo.htmleaf.com/1511/201511131551/images/web_heart_animation.png);background-position: left;background-repeat: no-repeat;height: 100px;width: 100
• CSS Sprite 精灵图

  CSS SpriteCSS Sprites叫 CSS精灵或者雪碧图，是一种网页图片应用处理方式。CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中。再利用CSS的"background-image"，"background-repeat"，"background-position"的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。为什么建议使用CSS Sprite在网页访问中，客户端每需要访问一张图片都会向服务器发送请求，所以，访问的图片数量越多，请求次数也就越多，造成延迟的可能性也就越大。所以，CSS Sprites技术加速的关键，并不是降低质量，而是减少个数，当然随之而来的增加内存消耗，CSS Sprites图片繁琐的合成等缺点在网站性能的提升前，也就不足为道了。CSS Sprites 的优点：减少图片的字节减少了网页的http请求，从而大大的提高了页面的性能减少命名难的问题CS
• CSS background深入理解及应用

  Background background属性的简写用法, 常见背景属性的理解以及神奇的渐变色。 目录 background属性的简写用法 常见背景属性介绍 神奇的渐变色 background属性 background简写属性在一个声明中可设置所有的背景属性。 可设置属性如下: background-image: 设置背景图像, 可以是真实的图片路径, 也可以是创建的渐变背景; background-position: 设置背景图像的位置; background-size: 设置背景图像的大小; background-repeat: 指定背景图像的铺排方式; background-attachment:

background position相关课程

• css定位 position 本课程，将带领大家了解一下定位的知识，教大家如何通过定位来进行布局。

  讲师：袁三日 初级 48594人正在学习

• 全面系统讲解CSS，从容面对日常使用，顺利搞定面试问答 CSS是前端开发过程中必不可少的知识点，也是难以彻底掌握的部分。本课程系统梳理CSS中各方面的知识点，帮助前端工程师更清晰地了解实际工作中如何应用CSS技术的，更好地面对日常使用和顺利通过面试关！

  讲师：TooooBug 初级 2128人正在学习

• CSS深入理解之border 本课程将深入讲解CSS中的border属性，深入介绍border-color之间的关系，以及border与background定位、border与透明边框，并教你如果使用border进行图形构建，以及如何借助border使用有限标签完成我们的布局。

  讲师：张鑫旭 中级 56542人正在学习

background position相关教程

• 1. 定义条形雪碧图动画 /* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */ height: 100vh; display: flex; align-items: center; justify-content: center; /* 添加背景图 */ background: url(../img/bg.jpg) center / cover;}.animate { width: 130px; height: 130px; background: url(../img/rect.png); /* 动画: 动画名(loading) 时长(0.6秒) 运行方式(step-end) 动画次数(无限) */ animation: loading .6s step-end infinite;}/* 定义动画：动画名(loading) */@keyframes loading { from { background-position: 0 0 } /* 第一个数字代表x轴坐标，第二个数字代表y轴坐标 */ 10% { background-position: -130px 0 } /* x坐标：-130 y坐标：0 */ 20% { background-position: -260px 0 } /* x坐标：-260 y坐标：0 */ 30% { background-position: -390px 0 } /* x坐标：-390 y坐标：0 */ 40% { background-position: -520px 0 } /* x坐标：-520 y坐标：0 */ 50% { background-position: 0 -130px } /* x坐标：0 y坐标：-130 */ 60% { background-position: -130px -130px } /* x坐标：-130 y坐标：-130 */ 70% { background-position: -260px -130px } /* x坐标：-260 y坐标：-130 */ 80% { background-position: -390px -130px } /* x坐标：-390 y坐标：-130 */ 90% { background-position: -520px -130px } /* x坐标：-520 y坐标：-130 */ to { background-position: 0 } /* 最后一帧不显示，可以随便写 */}/* 定义动画：动画名(animate) */@keyframes animate { from { background-position: 0 } to { background-position: -2600px }}咦？条形图只需要定义两行？一个from一个to？？？是的，这就是为什么推荐制作雪碧图的时候做成一行的原因。你只需要定义一开始的时候图像在原点，然后最后的时候图像有多宽，你就写负多少：这个图是2600像素，所以to里面的background-position就是 -2600px。数了一下这张雪碧图里面一共有 12 个元素，所以 steps() 括号里面要写12。div 盒子的宽高应该正好和雪碧图里面的一个元素的宽高相对应：用雪碧图的 宽 2600 除以 12 等于 216.666… 无限循环。咱们取一个近似值，就 216px 吧。所以宽高设置为 216 * 300，怎么设置呢？要让加载动画结束之后（也就是定义加载动画的最后一帧）div 就变成这个宽高。/* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */ height: 100vh; display: flex; align-items: center; justify-content: center; /* 添加背景图 */ background: url(../img/bg.jpg) center / cover;}.animate { width: 130px; height: 130px; background: url(../img/rect.png); /* 动画: 动画名(loading) 时长(0.6秒) 运行方式(step-end) 动画次数(无限) */ animation: loading .6s step-end infinite;}/* 定义动画：动画名(loading) */@keyframes loading { from { background-position: 0 0 } /* 第一个数字代表x轴坐标，第二个数字代表y轴坐标 */ 10% { background-position: -130px 0 } /* x坐标：-130 y坐标：0 */ 20% { background-position: -260px 0 } /* x坐标：-260 y坐标：0 */ 30% { background-position: -390px 0 } /* x坐标：-390 y坐标：0 */ 40% { background-position: -520px 0 } /* x坐标：-520 y坐标：0 */ 50% { background-position: 0 -130px } /* x坐标：0 y坐标：-130 */ 60% { background-position: -130px -130px } /* x坐标：-130 y坐标：-130 */ 70% { background-position: -260px -130px } /* x坐标：-260 y坐标：-130 */ 80% { background-position: -390px -130px } /* x坐标：-390 y坐标：-130 */ 90% { background-position: -520px -130px } /* x坐标：-520 y坐标：-130 */ /* 修改最后一帧，以便动画结束后盒子就应用最后一帧的样式 */ to { /* 下一个动画的宽高 */ width: 216px; height: 300px; /* 下一个动画的雪碧图 */ background-image: url(../img/animate.png); }}/* 定义动画：动画名(animate) */@keyframes animate { from { background-position: 0 } to { background-position: -2600px }}
• 4. 重新调整速度 尺寸的问题是解决了，怎么速度又不对了？原来是因为雪碧图缩小了一半，所以现在的宽只有 1300 px了。可是我们定义的动画是 -2600 px，于是乎动画在相同的时间移动了 2 倍的距离，看起来就会导致速度加快。解决办法也很简单，把定义的动画距离也同比例缩小：/* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */ height: 100vh; display: flex; align-items: center; justify-content: center; /* 添加背景图 */ background: url(../img/bg.jpg) center / cover;}.animate { width: 130px; height: 130px; background: url(../img/rect.png); /* 动画: 动画名(loading) 时长(0.6秒) 运行方式(step-end) 动画次数(3次) 填充模式(双向) */ animation: loading .6s step-end 3 both, /* 动画可以定义多个，每个动画用逗号分隔。*/ /* 第二个动画的动画名(animate) 时长(0.8秒) 运行方式(step-end) 延时(1.8秒) 动画次数(无限) */ animate .8s steps(12) 1.8s infinite;}/* 定义动画：动画名(loading) */@keyframes loading { from { background-position: 0 0 } /* 第一个数字代表x轴坐标，第二个数字代表y轴坐标 */ 10% { background-position: -130px 0 } /* x坐标：-130 y坐标：0 */ 20% { background-position: -260px 0 } /* x坐标：-260 y坐标：0 */ 30% { background-position: -390px 0 } /* x坐标：-390 y坐标：0 */ 40% { background-position: -520px 0 } /* x坐标：-520 y坐标：0 */ 50% { background-position: 0 -130px } /* x坐标：0 y坐标：-130 */ 60% { background-position: -130px -130px } /* x坐标：-130 y坐标：-130 */ 70% { background-position: -260px -130px } /* x坐标：-260 y坐标：-130 */ 80% { background-position: -390px -130px } /* x坐标：-390 y坐标：-130 */ 90% { background-position: -520px -130px } /* x坐标：-520 y坐标：-130 */ /* 修改最后一帧，以便动画结束后盒子就应用最后一帧的样式 */ to { /* 下一个动画的宽高 */ width: 108px; height: 150px; /* 下一个动画的雪碧图 */ background-image: url(../img/animate.png); /* 雪碧图的最短边(这里是高)刚好能够覆盖住盒子 */ background-size: cover; }}/* 定义动画：动画名(animate) */@keyframes animate { from { background-position: 0 } to { background-position: -1300px }}运行结果：911
• 1. 调用动画 定义好了就可以去调用了，来看一下怎么调用：/* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */ height: 100vh; display: flex; align-items: center; justify-content: center; /* 添加背景图 */ background: url(../img/bg.jpg) center / cover;}.animate { width: 130px; height: 130px; background: url(../img/rect.png); /* 动画: 动画名(loading) 时长(0.6秒) 运行方式(step-end) 动画次数(无限) */ animation: loading .6s step-end infinite;}/* 定义动画：动画名(loading) */@keyframes loading { from { background-position: 0 0 } /* 第一个数字代表x轴坐标，第二个数字代表y轴坐标 */ 10% { background-position: -130px 0 } /* x坐标：-130 y坐标：0 */ 20% { background-position: -260px 0 } /* x坐标：-260 y坐标：0 */ 30% { background-position: -390px 0 } /* x坐标：-390 y坐标：0 */ 40% { background-position: -520px 0 } /* x坐标：-520 y坐标：0 */ 50% { background-position: 0 -130px } /* x坐标：0 y坐标：-130 */ 60% { background-position: -130px -130px } /* x坐标：-130 y坐标：-130 */ 70% { background-position: -260px -130px } /* x坐标：-260 y坐标：-130 */ 80% { background-position: -390px -130px } /* x坐标：-390 y坐标：-130 */ 90% { background-position: -520px -130px } /* x坐标：-520 y坐标：-130 */ to { background-position: 0 } /* 最后一帧不显示，可以随便写 */}为了能够让同学们在浏览器里直接看结果，我们这里写了一个可运行的案例：910运行结果：  可以看到效果就已经很完美的呈现出来了，那么接下来我们再来添加一下条形雪碧图，看看条形雪碧图的用法有何不同。
• 2. 来看一下定义背景图位置的语法怎么写： background-position: 你想要的位置;想要的位置一共可以填两个值，第一个值代表横向的位置，第二个值代表纵向位置，如果省略第二个值默认是居中的。你想要的位置可以是 top、center、bottom、left、right这种关键字，如：background-position: top right;也可以是百分比数值，如：background-position: 100% 50%;还可以是具体的数字单位，如：background-position: 100px 50px;所以这里我们可以给它一个定位值：889运行结果：
• 3. 调节雪碧图尺寸 不过感觉最后这个跳动的卡通小人还是有点大，像素颗粒感明显，所以我们绝定缩小一下加载动画最后一帧给定的宽高：/* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */ height: 100vh; display: flex; align-items: center; justify-content: center; /* 添加背景图 */ background: url(../img/bg.jpg) center / cover;}.animate { width: 130px; height: 130px; background: url(../img/rect.png); /* 动画: 动画名(loading) 时长(0.6秒) 运行方式(step-end) 动画次数(3次) 填充模式(双向) */ animation: loading .6s step-end 3 both, /* 动画可以定义多个，每个动画用逗号分隔。*/ /* 第二个动画的动画名(animate) 时长(0.8秒) 运行方式(step-end) 延时(1.8秒) 动画次数(无限) */ animate .8s steps(12) 1.8s infinite;}/* 定义动画：动画名(loading) */@keyframes loading { from { background-position: 0 0 } /* 第一个数字代表x轴坐标，第二个数字代表y轴坐标 */ 10% { background-position: -130px 0 } /* x坐标：-130 y坐标：0 */ 20% { background-position: -260px 0 } /* x坐标：-260 y坐标：0 */ 30% { background-position: -390px 0 } /* x坐标：-390 y坐标：0 */ 40% { background-position: -520px 0 } /* x坐标：-520 y坐标：0 */ 50% { background-position: 0 -130px } /* x坐标：0 y坐标：-130 */ 60% { background-position: -130px -130px } /* x坐标：-130 y坐标：-130 */ 70% { background-position: -260px -130px } /* x坐标：-260 y坐标：-130 */ 80% { background-position: -390px -130px } /* x坐标：-390 y坐标：-130 */ 90% { background-position: -520px -130px } /* x坐标：-520 y坐标：-130 */ /* 修改最后一帧，以便动画结束后盒子就应用最后一帧的样式 */ to { /* 下一个动画的宽高 */ width: 108px; height: 150px; /* 下一个动画的雪碧图 */ background-image: url(../img/animate.png); }}/* 定义动画：动画名(animate) */@keyframes animate { from { background-position: 0 } to { background-position: -2600px }}注意：宽高一定要按比例缩小，不能宽缩小三分之一，高缩小一半。要宽和高都同时缩小一半才能保持住比例。运行结果：看起来怎么和咱们预想中的效果不太一样呢？因为盒子缩小了一半，但是雪碧图却并没有缩小，那么大家还记得之前的章节中我们讲过的如果雪碧图尺寸不吻合时怎么办吗？对没错！(大概率是不记得了）就是background-size: cover;/* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */ height: 100vh; display: flex; align-items: center; justify-content: center; /* 添加背景图 */ background: url(../img/bg.jpg) center / cover;}.animate { width: 130px; height: 130px; background: url(../img/rect.png); /* 动画: 动画名(loading) 时长(0.6秒) 运行方式(step-end) 动画次数(3次) 填充模式(双向) */ animation: loading .6s step-end 3 both, /* 动画可以定义多个，每个动画用逗号分隔。*/ /* 第二个动画的动画名(animate) 时长(0.8秒) 运行方式(step-end) 延时(1.8秒) 动画次数(无限) */ animate .8s steps(12) 1.8s infinite;}/* 定义动画：动画名(loading) */@keyframes loading { from { background-position: 0 0 } /* 第一个数字代表x轴坐标，第二个数字代表y轴坐标 */ 10% { background-position: -130px 0 } /* x坐标：-130 y坐标：0 */ 20% { background-position: -260px 0 } /* x坐标：-260 y坐标：0 */ 30% { background-position: -390px 0 } /* x坐标：-390 y坐标：0 */ 40% { background-position: -520px 0 } /* x坐标：-520 y坐标：0 */ 50% { background-position: 0 -130px } /* x坐标：0 y坐标：-130 */ 60% { background-position: -130px -130px } /* x坐标：-130 y坐标：-130 */ 70% { background-position: -260px -130px } /* x坐标：-260 y坐标：-130 */ 80% { background-position: -390px -130px } /* x坐标：-390 y坐标：-130 */ 90% { background-position: -520px -130px } /* x坐标：-520 y坐标：-130 */ /* 修改最后一帧，以便动画结束后盒子就应用最后一帧的样式 */ to { /* 下一个动画的宽高 */ width: 108px; height: 150px; /* 下一个动画的雪碧图 */ background-image: url(../img/animate.png); /* 雪碧图的最短边(这里是高)刚好能够覆盖住盒子 */ background-size: cover; }}/* 定义动画：动画名(animate) */@keyframes animate { from { background-position: 0 } to { background-position: -2600px }}运行结果：
• 2. 调用两个动画 重点是如何进行调用，先来看一下语法：/* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */ height: 100vh; display: flex; align-items: center; justify-content: center; /* 添加背景图 */ background: url(../img/bg.jpg) center / cover;}.animate { width: 130px; height: 130px; background: url(../img/rect.png); /* 动画: 动画名(loading) 时长(0.6秒) 运行方式(step-end) 动画次数(3次) 填充模式(双向) */ animation: loading .6s step-end 3 both, /* 动画可以定义多个，每个动画用逗号分隔。*/ /* 第二个动画的动画名(animate) 时长(0.8秒) 运行方式(step-end) 延时(1.8秒) 动画次数(无限) */ animate .8s steps(12) 1.8s infinite;}/* 定义动画：动画名(loading) */@keyframes loading { from { background-position: 0 0 } /* 第一个数字代表x轴坐标，第二个数字代表y轴坐标 */ 10% { background-position: -130px 0 } /* x坐标：-130 y坐标：0 */ 20% { background-position: -260px 0 } /* x坐标：-260 y坐标：0 */ 30% { background-position: -390px 0 } /* x坐标：-390 y坐标：0 */ 40% { background-position: -520px 0 } /* x坐标：-520 y坐标：0 */ 50% { background-position: 0 -130px } /* x坐标：0 y坐标：-130 */ 60% { background-position: -130px -130px } /* x坐标：-130 y坐标：-130 */ 70% { background-position: -260px -130px } /* x坐标：-260 y坐标：-130 */ 80% { background-position: -390px -130px } /* x坐标：-390 y坐标：-130 */ 90% { background-position: -520px -130px } /* x坐标：-520 y坐标：-130 */ /* 修改最后一帧，以便动画结束后盒子就应用最后一帧的样式 */ to { /* 下一个动画的宽高 */ width: 216px; height: 300px; /* 下一个动画的雪碧图 */ background-image: url(../img/animate.png); }}/* 定义动画：动画名(animate) */@keyframes animate { from { background-position: 0 } to { background-position: -2600px }}运行结果：这是怎么个原理呢？原来调用动画的时候可以一次性调用多个动画，动画与动画直接用逗号进行分隔。第一个加载动画我们让他重复运行 3 次，由于下一个动画的背景图和宽高都和加载动画不同，所以调用第一个动画时用填充模式将最后一帧定义的样式应用到下个动画上。

background position相关搜索

back backbone background background attachment background color background image background position background repeat backgroundcolor backgroundimage background属性 badge bash basics basis bat bdo bean before begintransaction

查看更多慕课网实用课程