两个不同大小的DIV背景答案

【问题标题】：Two DIV backgrounds with different sizes两个不同大小的DIV背景
【发布时间】：2023-03-23 10:38:01
【问题描述】：

基本上，标题说明了一切。

div {
  border-radius: 4px;
  background-image: url(IMAGE1.PNG), url(IMAGE2.PNG);
  box-shadow: 0 0 10px rgba(0,0,0,0.75), inset 1px 1px 2px #fff, inset -1px -1px 1px #777;
}

本质上，我希望 image1 将默认属性保持为典型背景，但我希望将 image2 设置为等同于 background-size: cover;

【问题讨论】：

您能否为它创建一个小提琴，以便我们更好地了解您在做什么？
说明问题，不要参考标题。也许您还可以添加一些 html 代码。我认为你必须给两个图像一个单独的类，并将不同的 css 添加到类中。

标签： html css background-image background-size

【解决方案1】：

background-size 也接受多个值。

background-size: auto, cover;

var pattern = Trianglify({
  height: 300,
  width: 300,
  cell_size: 40,
});

var div = document.getElementsByTagName('div')[0];

div.style.backgroundImage = "url('https://i.stack.imgur.com/955qe.png'), url('" + pattern.png() + "')";

div {
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.75), inset 1px 1px 2px white, inset -1px -1px 1px #777;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto, cover;
  height: 140px;
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.2.0/trianglify.min.js"></script>

<div></div>

【讨论】：

啊，只要它遵循背景图像中规定的值的顺序，我就接受它。我在想速记中会有一个技巧。
@RosenJanus：是的。另外，如果你喜欢三角形，还有一个三角形的演示。