那是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「背景鏈接」

回答

相關問題