Fatal编程技术网
  • css/
  • CSS:Alternative-min（）

CSS:Alternative-min（）

css

CSS:Alternative-min（）,css,Css,根据div的大小，我想设置background-position-x和background-size。 仅使用CSS而不使用JS或JQuery，我使用以下哪种方式： .test { transition: all 0.5s; background-image: url(./my-asset.svg); background-repeat: no-repeat; background-position-x: min(-50px, -100%); background-posit

根据div的大小，我想设置background-position-x和background-size。 仅使用CSS而不使用JS或JQuery，我使用以下哪种方式：

.test {
  transition: all 0.5s;
  background-image: url(./my-asset.svg);
  background-repeat: no-repeat;
  background-position-x: min(-50px, -100%);
  background-position-y: center;
  background-size: min(50px, 100%) 100%;
}
这可以正常工作，但只适用于最近的浏览器，但我的Firefox目标是v.68，它不兼容。 如果不使用JS或JQuery而只使用CSS，还有什么替代方案

我使用min复制我想要的输出。将红色部分悬停以使其工作：

身体 html{ 身高：100%； 宽度：100%； 保证金：5px； } 主要{ 显示器：flex； 弯曲方向：行； 背景色：青色； } .使用px{ 宽度：300px； 高度：300px； 边框：纯色3px黑色； } .使用百分比{ 左边距：200px； 宽度：100px； 高度：300px； 边框：纯色3px黑色； } .剩余图像{ 宽度：25%； 身高：100%； 过渡：所有1； 背景色：红色； 背景图像：urlhttps://www.w3schools.com/images/w3schools_green.jpg; 背景重复：无重复； 背景位置x:min-50px，-100%； 背景位置y：中心； 背景尺寸：min50px，100%100%； } .剩余图像：悬停{ 背景位置：左； }

你可以考虑使用伪元素的技巧。

调整两个示例的大小，以查看它们的行为是否相同：

.盒子{ 高度：100px； 宽度：100px； 边框：2倍实心； 调整大小：两者； 溢出：隐藏； 背景：线性梯度，蓝色0/50px 50px无重复； 背景位置x:min4em，100%； } 阿尔特先生{ 高度：100px； 宽度：100px； 边框：2倍实心； 调整大小：两者； 溢出：隐藏； 位置：相对位置； z指数：0； } .alt：：之前{ 内容：； 位置：绝对位置； 背景：继承； 背景：线性梯度，蓝色0/50px 50px无重复； 背景位置x:100%； 最大宽度：calc4em+50px；/*4em+背景宽度*/ 宽度：100%； 排名：0； 底部：0； 左：0； z指数：-1； }

你可以考虑使用伪元素的技巧。

调整两个示例的大小，以查看它们的行为是否相同：

.盒子{ 高度：100px； 宽度：100px； 边框：2倍实心； 调整大小：两者； 溢出：隐藏； 背景：线性梯度，蓝色0/50px 50px无重复； 背景位置x:min4em，100%； } 阿尔特先生{ 高度：100px； 宽度：100px； 边框：2倍实心； 调整大小：两者； 溢出：隐藏； 位置：相对位置； z指数：0； } .alt：：之前{ 内容：； 位置：绝对位置； 背景：继承； 背景：线性梯度，蓝色0/50px 50px无重复； 背景位置x:100%； 最大宽度：calc4em+50px；/*4em+背景宽度*/ 宽度：100%； 排名：0； 底部：0； 左：0； z指数：-1； }
是的，但是.box也被添加到第二个div中，它使用min@PierBJX我只是编写了一个优化的代码，第二个框中的最小值没有做任何事情，因为我将背景大小设置为0。然后，我不明白如何为background-position-x设置100%或4em？@PierBJX您运行了代码并测试了吗？伪元素使用with/max组合来执行此任务-width@PierBJX我已经拆分了代码并从第二个div中删除了box，这样您可以更好地看到yes，但是.box也添加到第二个div中，它使用min@PierBJX我只是写了一个优化的代码，第二个框中的最小值没有任何作用，因为我将背景大小设置为0。然后，我不明白如何为background-position-x设置100%或4em？@PierBJX是否运行了代码并对其进行了测试？伪元素使用with/max组合来执行此任务-width@PierBJX我已经拆分了这两个代码，并从第二个代码中删除了框，以便您可以更好地查看您是否确定此新代码？min中的负值？你能分享一个工作示例吗？这样我们就可以看到你所看到的。当div变大时，此代码将不显示背景。我做了一个工作示例@Temaniafififi看不到图像…检查我的更新回答您确定此新代码吗？min中的负值？你能分享一个工作示例吗？这样我们就可以看到你所看到的。当div变大时，此代码将不显示背景。我做了一个工作示例@TemaniAfifI看不到图像…检查我的更新答案