相关疑难解决方法(0)

我想将我的后台URL存储在自定义属性(CSS变量)中,并将它们与background属性一起使用.但是,在将字符串用作参数时,我无法找到插入字符串的方法url().

这是我的示例代码:

:root {
    --url: "https://download.unsplash.com/photo-1420708392410-3c593b80d416";
}

body {
    background: url(var(--url));
}

我知道这可以使用插值函数在Sass或LESS中轻松完成,但我很好奇是否有办法在没有任何预处理器的情况下完成.

我正在尝试使用CSS变量来生成动态路径。

范例：

:root {
  --fonts-path: "/path/to/font";
}

@font-face {
  font-family: "FontName";
  src: url(var(--fonts-path) + "/FontName-Light.woff") format('woff');
  font-weight: 100;
}

html {
  font-family: 'Metric', Arial, sans-serif;
}

使用未找到的模块失败'var(--hpe-fonts-path'，这是webpack日志：

ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./src/theme/fonts.css
Module not found: Error: Cannot resolve module 'var(--fonts-path' in /Users/project-sample/src/theme
 @ ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./src/theme/fonts.css 6:83-114 6:234-265 6:403-434 6:576-607

有指针吗？

如何将CSS attr()选择器与url()字段中的静态文本连接起来？

我使用的HTML:

<div image='/Require/static.png'></div> //Example 2
<div image='static.png'></div> //Example 3, 4, 5

例如:

//image attribute contains the image name (and prefix location when needed, see example 2)
div[image]:before {
    background-image: url('/Image/static.png'); //Works
    background-image: url(attr(image)); // Works
    background-image: url('/Image/' attr(image)); //Fails
    background-image: url('/Image/' #attr(image)); //Fails
    background-image: url('/Image/' {attr(image)); //Fails
    }

所以 - 如果可能的话 - 我怎样才能做到这一点？