那是possibe使用CSS变量的CSS“背景链接”

我想设置与所有我的CSS文件的图片的基本域，这里是我的尝试：那是possibe使用CSS变量的CSS“背景链接”

global.css中

:root 
{ 
    --bgd: #C0C0C0; 
    --picdomain: "https://somedomain.com/"; 
}

在HTML

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 
}

和负载s1.css

<link rel="stylesheet" type="text/css" href="s1.css">

HTML的背景颜色确实发生了变化，但没有显示背景。所以，我想其他办法：

global.css中

@picdomain: "https://somedomain.com";

s1.css

background: url("@picdomain/some/path/images/pic.png"); //can't read variable from imported css

没有帮助

只有工作，而我设置完整URL的图像，如如下：

global.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变量在 “背景”？

来源

2017-09-15 RRTW

嗨，我很害怕你不会在那里失去引号吗？不熟悉使用CSS变量，但据我知道，当你设置一个CSS属性的值（如背景网址）是不是你必须用引号括起来的值？ – jhek

这是一些类型错误，而问，我在这里和我的代码固定，但没有工作。 – RRTW

我明白了，无论如何，无论如何你都可以检查这张票，它可能会给你提示你的问题。 https://stackoverflow.com/questions/42330075/is-there-a-way-to-interpolate-css-variables-with-url – jhek

<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>

来源

2017-11-16 13:23:41

请添加一些解释，不要只转储代码作为您的整个答案。 – Vasan

那是possibe使用CSS变量的CSS“背景链接”

回答

相关问题