如何通過javascript設置背景圖片和漸變-在不使用dom style屬性進行jquery的情況下

Question

不確定設置背景圖像和漸變的語法應該是什么（以便我可以使圖像變暗）

我可以設置背景圖片，但不確定如何設置線性漸變

  holder.style.background = 'url(' + event.target.result + ') no-repeat';
  holder.style.backgroundSize = 'cover';
  holder.style.backgroundlinearGradient = 'rgba(0, 0, 0, 0.7)'  //this doesn't work

另外，我可以在style.background中組合多個屬性來在一行中設置所有3個大小和漸變以及圖像嗎？

請注意，我無法使用jquery，並且希望通過設置dom屬性來做到這一點。

Answer 1

現在，我只是一個js新手，但是，我相信您可以將所有背景屬性合並為一個更大的聲明，或者通過一些包含有關css信息的var來添加它們，例如：

var some_fancy_gradient = 'linear-gradient(red, blue)';
var some_fancy_image = 'your url'
yourelement.style.background = 'url('+some_fancy_image+') center center / cover no-repeat,'+some_fancy_gradient+' no-repeat';

觀看演示

不知道這是否是您要尋找的東西，但可能會為您指明正確的方向。

另外，一些文檔：

• CSS3漸變
• 多種背景
• 背景屬性速記和更多的 背景知識