【css】background-positionの仕組みがわからない

教えていただきたいこと

なぜ上記のような動きをするのか、わかりません。

前提

書籍でJavaScriptを学習中に、下記ソースコードで実行しました。

疑問点

なぜ「JavaScriptサンプルテスト」の背景が、jsが実行される前は赤いのでしょうか。青から赤に変わると思いました。
jsのbackgroundPosition:['100% 0','0 0']から、jsが実行された場合、右から左に色が変わると思ったのですが、左から右に青色が伸びるのはなぜでしょうか。

該当のソースコード

HTML

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="css/style.css">
7  <script src="js/script.js" defer></script>
8  <title>Document</title>
9</head>
10<body>
11  <h1 id="heading">JavaScriptサンプルテスト</h1>
12</body>
13</html>

CSS
1body{
2  text-align: center;
3}
4h1{
5  color:#fff;
6  display: inline-block;
7  background-image: linear-gradient(90deg, #0bd,#0bd 50%,red 50%,red);
8  background-size:200%;
9  padding: .5rem 1rem;
10}

JavaScript
1const heading = document.querySelector("#heading");
2
3const keyframes = {
4  color: ["transparent", "#fff"],
5  backgroundPosition: ["100% 0", "0 0"],
6};
7
8const options = {
9  duration: 2000,
10  easing: "ease",
11};
12
13heading.animate(keyframes, options);

最後に

background-positionについて、調べはしたのですが
なぜ上記のような動きをするのかわかりませんでした。
上記疑問点について、ご教授の程お願いいたします

行動規範の内容に同意します

回答2件

ベストアンサー

なぜ「JavaScriptサンプルテスト」の背景が、jsが実行される前は赤いのでしょうか。青から赤に変わると思いました。

background-position: 100% 0はbackground-position: right topと等価だからです。右側に寄っているため、右側の赤い色が見えています。

jsのbackgroundPosition:['100% 0','0 0']から、jsが実行された場合、右から左に色が変わると思ったのですが、左から右に青色が伸びるのはなぜでしょうか。

背景がボックス幅の2倍あるため、初期状態ではボックス左端よりもさらに左側に青部分が隠れています。
background-position: 0 0はbackground-position: left topと等価ですから、左端よりも左にあったものが左端まで移動するということは、右に向かって移動をするということです。

投稿2025/01/06 00:51

編集2025/01/06 00:58

Lhankor_Mhy

総合スコア37040

hohoho_1234

2025/01/06 12:11

ご回答ありがとうございます。2点理解することが出来ました。左端まで移動して、その結果青色が見え、右側に移動しているように動いているのですね。画像までつけていただき、大変わかりやすかったです。ご教授ありがとうございました。

行動規範の内容に同意します

既にLhankor_Mhyさんが説明されているとおりですが、公式ドキュメントの説明は下記になります。

background-position#パーセント値について - CSS: カスケーディングスタイルシート | MDN
指定された背景画像の位置のパーセント値のオフセットは、コンテナーに対して相対的なものです。 0% の値は、背景画像の左 (または上) の端がコンテナーの対応する左 (または上) の端に整列していることを意味するか、または、画像の 0% マークがコンテナーの 0% マーク上にあることを意味します。 100％の値は、背景画像の右 (または下) の縁がコンテナーの右 (または下) の縁と揃うか、または画像の 100％マークがコンテナーの 100% マーク上になることを意味します。したがって、水平方向または垂直方向に 50% の値を設定すると、画像の 50% マークがコンテナーの 50% マーク上になるので、背景画像が中央に位置することになります。同様に、 background-position: 25% 75% は、画像の左から 25%、上から 75% の位置にある点が、コンテナーの左から 25%、上から 75% の位置にあるコンテナーの点に配置されることを意味します。

つまり、
x位置が100%から0%に変化するということは、
画像の幅がコンテナより小さければ、画像は右から左へ移動しますが、
画像の幅がコンテナより大きければ右から左へ移動するように見えます。

投稿2025/01/06 06:14