我想用 CSS 文件中的所有图片设置一个基本域,这是我尝试过的:
全局.css
:root
{
--bgd: #C0C0C0;
--picdomain: "https://somedomain.com/";
}
s1.css
@import url("global.css");
body
{
background-color: var(--bgd); //works if only it exist
background: url(var(--picdomain)"some/path/images/pic.png"); //no effect
}
并在html中加载s1.css
<link rel="stylesheet" type="text/css" href="s1.css">
HTML 的背景颜色确实改变了,但背景没有显示出来。所以我尝试了其他方式:
全局.css
@picdomain: "https://somedomain.com";
s1.css
background: url("@picdomain/some/path/images/pic.png"); //can't read variable from imported css
没有帮助
只有在我为图像设置完整 URL 时才有效,如下所示:
全局.css
:root
{
--bgd: #C0C0C0;
--picdomain: url("https://somedomain.com/some/path/images/pic.png");
}
s1.css
@import url("global.css");
body
{
background-color: var(--bgd); //works if only it exist
background: var(--picdomain); //no effect
}
但这不是我想要的......是否可以在“背景”中使用css变量?
最佳答案
<style type="text/css">
:root {
--slide-1: url("{{url('public/assets/images/logo-nfs.png')}}"); /*this is laravel*/
--slide-2: url("<?php echo 'images/logo-nfs.png';?>");
}`enter code here`
.header111 {
background-image : var(--slide-1); /*this is php*/
}
.header22 {
background-image : var(--slide-2);
}
</style>
<div class="header111">
test here
</div>
<div class="header22">
test here
</div>
<br>
关于css - 是否可以在 css "background url"中使用 css 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46234705/