Table des matières
这是一个有趣的话题
重拾旧趣
一个足够简单的应用
HTML:
CSS:
默认值
百分比
试着使用百分比去实现上个例子
追本溯源
再出发
多值
多值的意义
多值的应用
写在最后
background系列文章:
Maison interface Web tutoriel HTML background系列之你不知道的background-position_html/css_WEB-ITnose

background系列之你不知道的background-position_html/css_WEB-ITnose

Jun 21, 2016 am 08:52 AM

这是一个有趣的话题

其实我并不确切的平时大家是怎么去应用或者玩转一个属性,一个值。我能肯定的是这些东西都有不少的可玩性。

我今天要聊的 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>
Copier après la connexion

于是我写了段简单的CSS,如下:

CSS:

div { width: 300px; height: 100px; background: gray url(../test.png) no-repeat;}.part1 { background-position: 0 0;}.part2 { background-position: 0 -100px;}
Copier après la connexion

很显然我可以得到预期,效果如 图1 :

这就是最典型的 CSS Sprites 使用场景。当然,你可以在线查看这个例子 Demo1 最简单的 background-position 应用 。

默认值

由于 background-position 的默认值是 0% 0% ,那么上述的CSS代码其实可以优化成:

.part2 { background-position: 0 -100px;}
Copier après la connexion

因为 .part1 指定的值是 0 0 ,和默认值相同,所以可以省略。你会发现,对一个属性了解得更多,就更能帮助你写出简洁的代码。

百分比

我并不能确定大家是否使用过 background-position 的百分比,这里就权当大家对此并不甚了解。

试着使用百分比去实现上个例子

我相信肯定有童鞋会这样写:

.part2 { /* background-position: 0 -100px; */ background-position: 0 -50%;}
Copier après la connexion

按照一般的思维,上述两行代码应该是等价的,不是么?在开篇的时候我们就说了背景图 图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%;}
Copier après la connexion

换算一下将会得到:

.part2 { background-position: 0 50px;}
Copier après la connexion

换算过程为:(设置背景的区域高度 - 背景图的高度) * -50%,即:(100 - 200) * -50% = 50px

这就解释了 Demo2 为什么会得到 图2 的效果。但这显然并不是我们想要的,我们预期的效果是 图1 。

根据上述的公式,我们可以逆推预期效果的百分比值是多少:

-100 / (100 - 200) = 100%
Copier après la connexion

所以如果你要使用百分比,那么定义应该是这样的:

.part2 { background-position: 0 100%;}
Copier après la connexion

其结果如 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 or represents an offset and must be preceded by a keyword, which specifies from which edge the offset is given.

翻译:如果指定了三个或四个值,那么每个 之前必须有一个关键字,用于指定该方向的偏移量。

当指定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;}
Copier après la connexion

这会终于得到我们的预期效果了,请看 图4

效果可以查看 Demo4 background-position 边界偏移 。实际上,有了多值之后,我们可以让背景图在任意方位上偏移,你可能会发现,这甚至可以让你的结构写得更简单,嵌套变浅。

写在最后

当你深入了解了每个属性的每个定义,你的CSS世界又会变得和以前不一样。enjoy it.

background系列文章:

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

HTML est-il facile à apprendre pour les débutants? HTML est-il facile à apprendre pour les débutants? Apr 07, 2025 am 12:11 AM

HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.

Les rôles de HTML, CSS et JavaScript: responsabilités de base Les rôles de HTML, CSS et JavaScript: responsabilités de base Apr 08, 2025 pm 07:05 PM

HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

Quel est un exemple d'une balise de départ dans HTML? Quel est un exemple d'une balise de départ dans HTML? Apr 06, 2025 am 12:04 AM

Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.

Comprendre HTML, CSS et JavaScript: un guide pour débutant Comprendre HTML, CSS et JavaScript: un guide pour débutant Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.

Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web? Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web? Apr 04, 2025 pm 11:30 PM

L'algorithme adaptatif de la position de l'axe y pour la fonction d'annotation Web Cet article explorera comment implémenter des fonctions d'annotation similaires aux documents de mots, en particulier comment gérer l'intervalle entre les annotations ...

Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404? Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404? Apr 04, 2025 pm 11:54 PM

GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...

HTML, CSS et JavaScript: outils essentiels pour les développeurs Web HTML, CSS et JavaScript: outils essentiels pour les développeurs Web Apr 09, 2025 am 12:12 AM

HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.

Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué? Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué? Apr 05, 2025 am 06:15 AM

Pour obtenir l'effet de la diffusion et de l'élargissement des images environnantes après avoir cliqué sur l'image, de nombreuses conceptions Web doivent obtenir un effet interactif: cliquez sur une certaine image pour faire les environs ...

See all articles