有没有一种方法可以在CSS中的URL中包含一个变量？

wwtsj6pe 于 2023-07-01 发布在其他

关注(0)|答案(1)|浏览(224)

我目前正在尝试制作一个css背景，它会根据屏幕的大小而改变大小，所以我尝试使用这样的变量：

var root = document.documentElement;

document.addEventListener('resize', () => {
  root.style.setProperty('--screen-x', window.screenX)
  root.style.setProperty('--screen-y', window.screenY)
})

#element {
   background-image: url(https://picsum.photos/var(--screen-x)/var(--screen-y)?random=3);
}

顺便说一句，有4个不同的元素，从1到4随机得到4个单独的图像与picsum。

对不起，如果我不清楚，英语不是我的第一语言：（*

这显然是行不通的，但我想知道是否有办法做到这一点？（获取URL中的变量）

css

来源：https://stackoverflow.com/questions/76587410/is-there-a-way-to-include-a-variable-in-a-url-in-css

1条答案

按热度按时间

xzlaal3s1#

一个混乱的解决方案

var root = document.documentElement;

resize()

document.addEventListener('resize', () => resize)

function resize() {
root.style.setProperty('--url', `url(https://picsum.photos/${window.screenX}/${window.screenY}?random=3)`)
}

:root {
  --url: "";
}

#element {
   width: 100vw;
   height: 100vh;
   background-image: var(--url);
}

<div id="element"></div>

赞(0）回复(0）举报 2023-07-01

我来回答

有没有一种方法可以在CSS中的URL中包含一个变量？

1条答案

相关问题

热门标签

最新问答