首页  >  文章  >  web前端  >  css中background-position属性用法总结

css中background-position属性用法总结

伊谢尔伦
伊谢尔伦原创
2017-06-08 14:25:413353浏览

background属性是CSS中最常见的属性之一,要想实现CSS抠图,只需要用到一个属性:background-position。background-position是用来控制元素背景图片的位置。技巧是,实际上指定的是图片左上角相对于元素左上角的位置。它接受三种值:关键词,比如top、right、bottom、left和center;长度值,比如px、em、rem等;百分值%。下面的内容就来聊一聊有关background-position属性用法的话题。

首先可以学习php中文网相关的免费课程

1. 学习《CSS 0基础入门教程》中的  CSS背景 章节课程

CSS 0基础入门教程

2. 观看《黑马程序员css视频教程》中的 背景和边距 视频课程

黑马程序员css视频教程

background-position属性用法

1. css background-position属性

background-position 属性设置背景图像的起始位置。

这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。

提示:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。

2. background-position百分比原理

对background-size:100% auto,意思是背景图片宽度为元素宽度*100%,高度等比缩放。详情可见css3 background。

对background-position很自然的以为百分比是根据父元素宽度计算的,但background-position真的不是,它有一套自己的原理。

3. CSS中background-position的使用

两个值前面一个是横向的定位,我们称为x轴方向定位。后面一个值是纵向的定位,我们称为y轴方向定位。如果只有一个值,那默认的就是x轴方向,这时y轴方向就默认的是上下居中对齐,也就是center。

4. css使用background-position属性来完成雪碧图的代码详解

雪碧图就是CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,就是把多张小图标合并到一张图片上,然后用css的background-position来显示需要显示的部分。

可以减少加载网页图片时对服务器的请求次数,提高页面的加载速度,解决IE6鼠标滑过时出现闪白的现象。

5. background系列之你不知道的background-position

我们知道 background-position 是用来指定背景图像的偏移值的,能让一张图从特定的位置开始展现。而 CSS Sprites 就是通过将多个小图拼接成一张大图,然后利用 background-position 来指定需要显示的区域,以此达到合并HTTP请求的预期。

相关问答

1. background-position截取图片后会有个边框去不掉

2.background-position使用疑惑。

3. 关于background-position百分比的问题?

【相关推荐】

1. php中文网免费教程:《CSS 在线手册》

2. php中文网免费视频教程:《弹指间学会HTML视频教程》

3. php中文网免费视频教程:《php.cn独孤九贱(2)-css视频教程》

以上是css中background-position属性用法总结的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn