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

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

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)

Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version? Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version? Mar 04, 2025 pm 12:32 PM

Le cache de mise à jour de la page Web du compte officiel, cette chose est simple et simple, et elle est suffisamment compliquée pour en boire un pot. Vous avez travaillé dur pour mettre à jour l'article officiel du compte, mais l'utilisateur a toujours ouvert l'ancienne version. Dans cet article, jetons un coup d'œil aux rebondissements derrière cela et comment résoudre ce problème gracieusement. Après l'avoir lu, vous pouvez facilement faire face à divers problèmes de mise en cache, permettant à vos utilisateurs de toujours ressentir le contenu le plus frais. Parlons d'abord des bases. Pour le dire franchement, afin d'améliorer la vitesse d'accès, le navigateur ou le serveur stocke des ressources statiques (telles que des images, CSS, JS) ou du contenu de la page. La prochaine fois que vous y accédez, vous pouvez le récupérer directement à partir du cache sans avoir à le télécharger à nouveau, et il est naturellement rapide. Mais cette chose est aussi une épée à double tranchant. La nouvelle version est en ligne,

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Mar 17, 2025 pm 12:27 PM

L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.

Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Mar 17, 2025 pm 12:20 PM

L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.

Comment ajouter efficacement les effets de course aux images PNG sur les pages Web? Comment ajouter efficacement les effets de course aux images PNG sur les pages Web? Mar 04, 2025 pm 02:39 PM

Cet article démontre un ajout de bordure PNG efficace aux pages Web à l'aide de CSS. Il soutient que CSS offre des performances supérieures par rapport à JavaScript ou à des bibliothèques, détaillant comment ajuster la largeur, le style et la couleur des bordures pour un effet subtil ou proéminent

Quel est le but du & lt; datalist & gt; élément? Quel est le but du & lt; datalist & gt; élément? Mar 21, 2025 pm 12:33 PM

L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

Quel est le but du & lt; Progress & gt; élément? Quel est le but du & lt; Progress & gt; élément? Mar 21, 2025 pm 12:34 PM

L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati

Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement? Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement? Mar 12, 2025 pm 04:05 PM

Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit

Quel est le but du & lt; mètre & gt; élément? Quel est le but du & lt; mètre & gt; élément? Mar 21, 2025 pm 12:35 PM

L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex

See all articles