带有背景图像 url 的 CSS 变量

Posted 2023-02-23

【中文标题】带有背景图像 url 的 CSS 变量

【英文标题】：CSS Variables with background-image url

【发布时间】：2017-06-04 13:51:38

【问题描述】：

我是否误解了 CSS 变量的功能？我正在尝试将背景图像 url 传递给这样的变量：当我传递一些简单的东西（如颜色等）时，它似乎工作正常......

:root 
  --slide-1: url(/static/images/slideshow/slide1.jpg) ;
  --slide-2: url(/static/images/slideshow/slide2.jpg) ;
  --slide-3: url(/static/images/slideshow/slide3.jpg) ;
  --slide-4: url(/static/images/slideshow/slide4.jpg) ;
  --slide-5: url(/static/images/slideshow/slide5.jpg) ;


//and then

.jumbotron > .jumbotron-slideshow:nth-child(1)  
  background-image: var(--slide-1); 


.jumbotron > .jumbotron-slideshow:nth-child(2) 
  animation-delay: 6s;
  background-image: var(--slide-2);


.jumbotron > .jumbotron-slideshow:nth-child(3) 
  animation-delay: 12s;
  background-image: var(--slide-3);


.jumbotron > .jumbotron-slideshow:nth-child(4) 
  animation-delay: 18s;
  background-image: var(--slide-4);


.jumbotron > .jumbotron-slideshow:nth-child(5) 
  animation-delay: 24s;
  background-image: var(--slide-5);

【问题讨论】：

尝试将路径放在变量中并将其用作.jumbotron > .blah background-image: url(--slide-1); 我没有使用它们，但看起来像一个go'er

对我来说看起来不错，但是您没有包含所有代码或工作图像，因此很难判断出了什么问题。这是一个演示codepen.io/anon/pen/KaWwvz，这是How to create a Minimal, Complete, and Verifiable example

您是否尝试过使用绝对路径？

@Roljhon 做到了，一定没有看到正确的路径谢谢！

@SandraWillford 一个很好的调试方法是从最简单的开始！祝你好运朋友！ :)

【参考方案1】：

这是 Chrome 中的 bug，代码在 Firefox 中运行良好。

您现在必须坚持使用 var() 中的绝对 URL。

【参考方案2】：

这是一个错误，但现在可以使用。 ?

【讨论】：

当我尝试使用 base64 数据 url (--example: url('data:image/png;base64,<encoded image here>')) 时不起作用。有什么解决方法吗？

@AlexNaidovich 确实有效（在 Chrome 版本 80.0.3987.132 中测试）：--detail-push-chevron: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2020'><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23ff0000'/></svg>"); 然后：.hasBackground background-image: var(--detail-push-chevron);