时间戳

首页 > 解决方案 > 多个背景图像 url：应用附加到 url 列表而不是替换的 css 样式

css - 多个背景图像 url：应用附加到 url 列表而不是替换的 css 样式

问题描述

可以为 background-image 属性提供一个 url 列表：

background-image:url('imageA.jpg'),url('imageB.jpg');

是否可以将另一种 css 样式简单地附加到此列表中，而不是覆盖它？

标签： css

解决方案

function fAddBackgroundImage(oElem, sUrl) {
  oElem.style.backgroundImage = `${getComputedStyle(oElem).backgroundImage}, url('${sUrl}')`;
  return getComputedStyle(oElem).backgroundImage;
}
console.log( fAddBackgroundImage(document.querySelector('.bg'), 'imageC.jpg') );
.bg {
  background-image: url('imageA.jpg'), url('imageB.jpg');
}
<div class="bg"></div>

推荐阅读