这是一个有趣的话题
其实我并不确切的平时大家是怎么去应用或者玩转一个属性，一个值。我能肯定的是这些东西都有不少的可玩性。
我今天要聊的 background-position 应该已经被大家玩得色彩斑斓了。尤其是 CSS Sprites 流行的这些年， background-position 基本上是被应用最多的属性之一。
重拾旧趣
我们知道 background-position 是用来指定背景图像的偏移值的，能让一张图从特定的位置开始展现。而 CSS Sprites 就是通过将多个小图拼接成一张大图，然后利用 background-position 来指定需要显示的区域，以此达到合并HTTP请求的预期。
一个足够简单的应用
为了回顾 background-position 的应用，接下来我将会用一个最简单的例子来代入，这里有一张由2个 300*100px 垂直拼接而成的图片作为背景图，如 图0 ：
我现在需要 图0 在2个并排的div中分别显示不同的部分：
HTML:
<div class="part1"><!-- 显示图0上半部分 --></div><div class="part2"><!-- 显示图0下半部分 --></div>
于是我写了段简单的CSS，如下：
CSS:
div { width: 300px; height: 100px; background: gray url(../test.png) no-repeat;}.part1 { background-position: 0 0;}.part2 { background-position: 0 -100px;} 很显然我可以得到预期，效果如 图1 ：
这就是最典型的 CSS Sprites 使用场景。当然，你可以在线查看这个例子 Demo1 最简单的 background-position 应用 。
默认值
由于 background-position 的默认值是 0% 0% ，那么上述的CSS代码其实可以优化成：
.part2 { background-position: 0 -100px;} 因为 .part1 指定的值是 0 0 ，和默认值相同，所以可以省略。你会发现，对一个属性了解得更多，就更能帮助你写出简洁的代码。
百分比
我并不能确定大家是否使用过 background-position 的百分比，这里就权当大家对此并不甚了解。
试着使用百分比去实现上个例子
我相信肯定有童鞋会这样写：
.part2 { /* background-position: 0 -100px; */ background-position: 0 -50%;} 按照一般的思维，上述两行代码应该是等价的，不是么？在开篇的时候我们就说了背景图 图0 的高度是 200px ，那么 -50% 正好是 -100px 。
不用着急，我们会用实际的例子来验证这个结果，来看 Demo2 检验 background-position 的百分比值 。
结果让人有点忧伤，这和我们的设想有点出入，这是为什么呢？
追本溯源
我们都知道一个百分比值，必然会需要有一个参照尺寸。举个例子来讲，假设我定义一个元素的宽度是 50% ，那么这个元素的具体宽度就是： 包含块宽度 * 50% 。
所以，如果你需要使用百分比作为 background-position 的值，必须清楚它的参照尺寸是什么。
w3c 是这样描述 background-position 比分比值的：
原文：refer to size of background positioning area minus size of background image.
翻译：参照指定背景区域的宽度减去背景图片的宽度
这是什么意思呢？白话一点说： background-position 的百分比值参照的是设置背景的区域减去背景图的尺寸。
再出发
按照这个思路，我们将：
.part2 { background-position: 0 -50%;} 换算一下将会得到：
.part2 { background-position: 0 50px;} 换算过程为：(设置背景的区域高度 - 背景图的高度) * -50%，即：(100 - 200) * -50% = 50px
这就解释了 Demo2 为什么会得到 图2 的效果。但这显然并不是我们想要的，我们预期的效果是 图1 。
根据上述的公式，我们可以逆推预期效果的百分比值是多少：
-100 / (100 - 200) = 100%
所以如果你要使用百分比，那么定义应该是这样的：
.part2 { background-position: 0 100%;} 其结果如 Demo3 正确使用 background-position 百分比
这会终于得到我们的预期效果了，请看 图3
了解了百分比的这个特性后，会帮助我们大大简化某些定义，比如我在 Yo 里面对yo-score 的处理，非常巧妙，有兴趣的童鞋可以自己研究一下，这里不细讲。
另外：需要注意的是百分比值会受 background-size 影响，因为 background-size 可以改变背景图像的大小。
多值
在 CSS3 中，对 background-position 属性进行了扩展，允许接受3到4个参数，用于指定背景图的起始方向和具体位置。
原文：If three or four values are given, then each
翻译：如果指定了三个或四个值，那么每个
当指定3到4个参数时，不接受 center 关键字作为偏移量作为边界，只能使用 top, right, bottom, left 这4个关键字。
多值的意义
在此前，我们使用 background-position 只能让背景图从 top, right, bottom, left, center 这5个边界开始显示，但无法指定任意一个边界的偏移量。
举个例子：我想让一个背景图从右下角偏移 20px
你会发现如果没有多值扩展，你很难轻易做到这件事，除非你能确定容器的宽高永远都是显式定义好的，就算如此，其灵活性也一文不值。
多值的应用
如果利用多值特性，这将变得非常轻松，我们仍使用 图0 作为背景图，来做一个演示。
.demo { width: 400px; height: 400px; background: url(../test.png) no-repeat; background-position: right -300px bottom 20px;} 这会终于得到我们的预期效果了，请看 图4
效果可以查看 Demo4 background-position 边界偏移 。实际上，有了多值之后，我们可以让背景图在任意方位上偏移，你可能会发现，这甚至可以让你的结构写得更简单，嵌套变浅。
写在最后
当你深入了解了每个属性的每个定义，你的CSS世界又会变得和以前不一样。enjoy it.
background系列文章：
The Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AMThe future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.
HTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AMThe roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.
The Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AMThe future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.
HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AMThe roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.
HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AMHTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.
HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AMHTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.
From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AMHTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.
Understanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AMWebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SublimeText3 Chinese version
Chinese version, very easy to use
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
Dreamweaver CS6
Visual web development tools
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
Zend Studio 13.0.1
Powerful PHP integrated development environment
