在线性渐变上使用带有背景位置的百分比值 [英] Using percentage values with background-position on a linear-gradient

问题描述

有没有办法让 background-position 取百分比值?目前，我的按钮仅适用于 width 和 background-position 的显式值.

body {最小高度:100vh；显示:弹性；弹性方向:列；justify-content:空间环绕；对齐项目:居中；}.按钮 {显示:弹性；对齐内容:居中；对齐项目:居中；文字装饰:无；白颜色;字体粗细:粗体；宽度:350px；高度:50px；边框:1px纯绿色；过渡:背景0.5s；背景重复:不重复；背景图像:线性渐变(向左，#2484c6，#1995c8 51%，#00bbce)，线性渐变(向右，#2484c6 0%，#1995c8 51%，#00bbce 76%)；}.button-pixel {背景位置:-350px 0px, 0px 0px;}.button-pixel:hover {背景位置:0px 0px，350px 0px；}.button-百分比{背景位置:-100% 0px, 0px 0px;}.button-百分比:悬停{背景位置:0% 0px，100% 0px；}

首先，我们考虑图像以找到我们将用于放置图像的参考点.考虑到图像的大小(如定义的与绿线).然后，考虑到容器的大小，我们将该点容器内放在距离上/左角30% 30%的位置.>
从这个逻辑中，我们可以清楚地识别出一些像
这样的小事
 <代码> 50％50％(中心)<代码> 100％100％(右下)<代码> 100％0％(右上)
现在很明显，如果图像的大小等于容器的大小，那么什么都不会发生，因为所有位置都相同.图片的上/左已经在容器的上/左(0% 0%)，中心已经在中心(50% 50%)等
.b {宽度:200px；高度:200px；背景:网址(https://picsum.photos/200/200?image=1069)不重复；边框:1px 实心；背景位置:0% 0%;位置:相对；动画:后退5s无限线性交替；}.b:之前{内容:"";位置:绝对；顶部:0；左:0;宽度:10px；高度:10px；背景:红色；动画:改变5s无限线性交替；}@keyframes 返回{to{background-position:100% 100%;}}@keyframes 改变{to{top:100%;左:100%;}}
<div class="b"></div>
上述逻辑在应用于渐变时是相同的，因为渐变被视为图像，并且默认情况下，如果您不指定background-size，渐变的大小将是其大小容器，与使用图像不同.
如果我们参考
如图所示，我们首先考虑图像的 -50%，即 -50px，以定义我们的参考点(即，距图像左边缘 -50 像素).然后，考虑到容器的大小(距容器左边缘 -100 像素)，我们将该点放置在 -50% 处.然后我们绘制图像，就得到了上面的结果.仅图像的 100px 可见.
我们可能还会注意到，当图像的大小小于容器的大小时，负百分比值的行为与负固定值相同(两者都会将图像向左移动).在这种情况下，-50% 0 与 -50px 0 相同.
.b {宽度:200px；高度:200px；显示:内联块；边框:1px 实心；背景:url(https://picsum.photos/100/100?image=1069) -50% 0/100px 100px 无重复；}.一种{背景:url(https://picsum.photos/100/100?image=1069) -50px 0/100px 100px 不重复；}
<div class="b a">

例如，如果我们将图像大小增加到 150px 150px，-50% 0 将与 -25px 0 相同.

当我们使尺寸大于容器时，负值将开始将图像向右移动(就像使用正像素值一样)，这是合乎逻辑的，因为 50%会增加，而容器的50%将保持不变.

如果我们考虑前面的插图，就像增加顶部的绿线，直到它大于底部的绿线.所以仅标志不足以知道背景图像将如何移动；我们还需要考虑尺寸.

.b{宽度:200px；高度:200px；边框:1px 实心；背景:url(https://picsum.photos/300/300?image=1069) -50% 0/50px 50px 不重复；动画:改变2s线性无限交替；}@关键帧变化{到 {background-size:300px 300px}}

从逻辑上讲，渐变也会发生同样的情况:

.b {宽度:200px；高度:200px；边框:1px 实心；背景:线性渐变(向右，红色，蓝色)-50% 0/50px 150px 不重复；动画:改变2s线性无限交替；}@关键帧变化{到 {background-size:300px 150px}}

大值(> 100%)

与之前的逻辑相同:如果我们在 150% 0 处定义背景，那么我们考虑从左边缘(或 50% 从右边缘开始)，然后我们将它放置在距离容器左边缘 150% 的位置.

.b {宽度:200px；高度:200px；边框:1px 实心；背景:url(https://picsum.photos/100/100?image=1069) 150% 0/100px 100px 不重复；}

<div class="b"></div>

在这种情况下，150% 0 等价于 150px 0，如果我们开始增加背景尺寸，我们将具有与之前演示的相同的行为:>

.b {宽度:200px；高度:200px；边框:1px 实心；背景:url(https://picsum.photos/300/300?image=1069) 150% 0/50px 50px 无重复；动画:改变2s无限线性交替；}@关键帧改变{到 {background-size:300px 300px}}

<div class="b"></div>

特殊情况

使用范围之外的值[0% 100%] 允许我们隐藏背景图像，但我们如何找到确切的值以完全隐藏图像?

让我们考虑下图:

我们的图像宽度为 Ws，容器宽度为 Wp，我们需要找到 p 的值.从图中我们可以得到如下公式:

p * Wp = p * Ws + Ws <=>p = Ws/(Wp - Ws) 其中 p 在 [0,1]

如果容器大小是 200px 并且图像是 100px 那么 p 是 1 所以 100%(我们当然添加负号，它是 -100%).

如果我们考虑使用 background-size 而不是固定值的百分比值，我们可以使这个更通用.假设 background-size 是 S%.那么我们就会有Ws = Wp * s (s in [0,1] and S=s*100%)，公式就是

p = Ws/(Wp - Ws) <=>p = s/(1 - s)

加上负号就是p = s/(s - 1).

现在，如果我们想隐藏右侧的图像，我们在右侧执行相同的逻辑(我们考虑上图的镜像)，但由于我们将始终考虑左边缘以找到我们需要的百分比添加100%.

新的百分比p'%为100% + p%，公式为p' = 1 + p -->p' = 1 + s/(1 - s) = 1/(1 - s).

这是一个动画来说明上述计算:

.b {宽度:200px；高度:50px；边距:5px；边框:1px 实心；背景:线性渐变(向右，红色，蓝色)不重复；背景尺寸:计算(var(--s)* 100%)100%；动画:改变4s线性无限交替；}@关键帧变化{from {/*隐藏在左边*/背景位置:calc(var(--s)/(var(--s) - 1) * 100%)}to {/*隐藏在右边*/背景位置:calc(1/(1 - var(--s)) * 100%)}}

<div class="b" style="--s:0.8">

<div class="b" style="--s:2">

让我们计算一些值:

当s=0.5时，我们有一个background-size等于50%，百分比值将来自-100% 到 200%.在这种情况下，我们以负值开始，以正值结束，因为图像的大小小于容器的大小.如果我们考虑最后一种情况 (s=2)，background-size 等于 200%，百分比值将来自 <代码>200% 到 -100%.我们以正值开始，以负值结束，因为图像的大小大于容器的大小.

这证实了我们之前所说的:要向左移动图像，如果尺寸很小，我们需要负值，但如果尺寸很大，我们需要正值(右侧也是如此).

像素和百分比值之间的关系

让我们定义一种基于像素值计算百分比值的方法，反之亦然(即在两者之间进行转换的公式).为此，我们只需要考虑参考点

当使用像素值时，我们会考虑蓝线，我们会有background-position:X Y

当使用百分比值时，我们将考虑绿线，我们将有 background-position:Px Py.

公式如下: X + Px * Ws = Px * Wp 其中 Ws 是图像的宽度，Wp是容器的宽度(考虑高度的 Y 轴公式相同).

我们将有 X = Py * (Wp - Ws).根据这个公式，我们可以验证前面解释的两点:

• 当Wp = Ws时，公式不再有效，这证实了当图像大小与容器相同时，百分比值没有影响；因此像素和百分比值之间没有关系.
• X 和 Px 在 Wp > 时符号相同.Ws 并且当 Wp <;Ws.这证实了百分比值的行为取决于图像的大小.

如果我们考虑background-size的百分比值，我们也可以用不同的方式表达公式.我们将有 X = Px * Wp * (1-s).

这是一个动画来说明上述计算:

.b {宽度:200px；高度:50px；边距:5px；边框:1px 实心；背景:线性渐变(向右，红色，蓝色)不重复；背景尺寸:计算(var(--s)* 100%)100%；动画:百分比 2s 线性无限交替；}.box.a {动画名称:像素；}@关键帧百分比{从 { 背景位置:-50%;}到 { 背景位置:150%;}}@关键帧像素{来自 { 背景位置:calc(-0.5 * 200px * (1 - var(--s))) }到 { 背景位置:calc(1.5 * 200px * (1 - var(--s)));}}

<div class="b a" style="--s:0.5">

<div class="b" style="--s:2">

<div class="b a" style="--s:2">