如何在CSS變量中使用CSS變量來更改圖像？

Question

我正在對http://codepen.io/wesbos/pen/adQjoY進行一次小更新，並希望使用CSS變量來更改圖像，以查看是否可以這樣做。 到目前為止，它不起作用。

<img src=imageFile>

<style>
:root {
    --image: 1;
    --imageFile: '"https://source.unsplash.com/7bwQXzbF6KE/800x500"';
}

img {
    src: var(--imageFile);
}
</style>

並且我有一些在<script> ... </script>實現的If，Then，Else來更改imageFile變量。

在DevTools控制台中，我得到：

GET文件：/// Users / tim / bloc / JavaScript30-master / 03％20-％20CSS％20Variables / imageFile net :: ERR_FILE_NOT_FOUND

圖像不變。 你能幫我嗎？ 這是我更新之前的完整代碼：

 // get the inputs const inputs = [].slice.call(document.querySelectorAll('.controls input')); // listen for changes inputs.forEach(input => input.addEventListener('change', handleUpdate)); inputs.forEach(input => input.addEventListener('mousemove', handleUpdate)); function handleUpdate(e) { // append 'px' to the end of spacing and blur variables const suffix = (this.id === 'base' ? '' : 'px'); document.documentElement.style.setProperty(`--${this.id}`, this.value + suffix); } 

 :root { --base: #ffc600; --spacing: 10px; --blur: 10px; } body { text-align: center; } img { padding: var(--spacing); background: var(--base); -webkit-filter: blur(var(--blur)); /* 👴 */ filter: blur(var(--blur)); } .hl { color: var(--base); } body { background: #193549; color: white; font-family: 'helvetica neue', sans-serif; font-weight: 100; font-size: 50px; } .controls { margin-bottom: 50px; } a { color: var(--base); text-decoration: none; } input { width:100px; } 

 <h2>Update CSS Variables with <span class='hl'>JS</span></h2> <div class="controls"> <label>Spacing:</label> <input type="range" id="spacing" min="10" max="200" value="10"> <label>Blur:</label> <input type="range" id="blur" min="0" max="25" value="10"> <label>Base Color</label> <input type="color" id="base" value="#ffc600"> </div> <img src="http://unsplash.it/800/500?image=899"> <p class="love">Made by <a href="http://twitter.com/wesbos">@wesbos</a> 😘</p> <p class="love">Chrome 49+, Firefox 31+</p> 

Answer 1

src是HTML屬性，而不是CSS屬性。

src=imageFile指向當前URL目錄路徑中名為imageFile 。 這就是為什么瀏覽器嘗試GET file:///Users/tim/bloc/JavaScript30-master/03%20-%20CSS%20Variables/imageFile ，這自然是行不通的。

您仍然可以使用自定義屬性，但是由於需要設置HTML屬性而不是CSS屬性，因此不需要img規則。 請給img一個ID，然后從不需要的自定義屬性值中刪除雙引號（即使在JavaScript中也是如此），然后將src HTML屬性的值直接設置為自定義屬性值：

 var customProps = window.getComputedStyle(document.documentElement); var img = document.createElement('img'); img.id = 'imageFile'; img.alt = ''; img.src = customProps.getPropertyValue('--imageFile'); document.body.appendChild(img); 

 :root { --image: 1; --imageFile: https://source.unsplash.com/7bwQXzbF6KE/800x500; } 

 <!-- The script should generate an img element that looks like this: <img id="imageFile" alt="" src="https://source.unsplash.com/7bwQXzbF6KE/800x500"> --> 

一些注意事項：

• 我將保留--image自定義屬性，盡管在此示例中未使用該屬性。 我猜想它是作為查詢字符串數據附加到URL上的，應該留給讀者練習。

• 在本示例中，該ID在技術上也未使用，因為我通過JavaScript添加該元素，因為在有效的HTML文檔中沒有非空src情況下無法標記img元素，但是在換出圖像時將很有用稍后在問題中描述。

• 如果有人想知道使用JavaScript來解決問題不是這種情況，那不是- 規范本身明確將JavaScript列為CSS定制屬性的有效（甚至是典型）用例。

Answer 2

如果您想使用CSS來指定文件的來源，則可以使用如下所示的內容：

HTML：

<img>

CSS：

img{
  content:url("IMAGE URL");
}

供您參考： https : //jsfiddle.net/tqoLe7r3/

Answer 3

在:root聲明中，您只能將CSS值設置為變量。

嘗試這個：

:root{
  --imageFile: url('https://source.unsplash.com/7bwQXzbF6KE/800x500');
}
img {
  content: var(--imageFile);
}

像這樣： https : //jsfiddle.net/wdkmbeL7/