css 如何确定包含图像的div的最佳背景色？

aiqt4smr 于 2023-04-13 发布在其他

关注(0)|答案(1)|浏览(149)

我的图像资产中有几个徽标。这些徽标将导入到this website中。每个徽标都有一个随机颜色（可以是白色，黑色，灰色，红色，蓝色，绿色等），并具有透明背景。例如：

下面的代码将应用于在网站页面上显示徽标：

.magic-box {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    position: relative;
    border-radius: 20px;
    background-color: white; /* can be changed */
}

.magic-image {
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.images {
  display: flex;
}

<div class="images">
  <div class="magic-box">
    <img src="https://i.stack.imgur.com/b7yHv.png" class="magic-image" />
  </div>
  <div class="magic-box">
    <img src="https://i.stack.imgur.com/IhCH1.png" class="magic-image" />
  </div>
  <div class="magic-box">
    <img src="https://i.stack.imgur.com/tYjdM.png" class="magic-image" />
  </div>
</div>

问题是当我将.magic-box的背景颜色设置为白色时，白色徽标不会显示。当背景颜色设置为黑色时，黑色徽标不可见，等等。

.magic-box {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    position: relative;
    border-radius: 20px;
    background-color: black; /* can be changed */ 
}

.magic-image {
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.images {
  display: flex;
}

<div class="images">
  <div class="magic-box">
    <img src="https://i.stack.imgur.com/b7yHv.png" class="magic-image" />
  </div>
  <div class="magic-box">
    <img src="https://i.stack.imgur.com/IhCH1.png" class="magic-image" />
  </div>
  <div class="magic-box">
    <img src="https://i.stack.imgur.com/tYjdM.png" class="magic-image" />
  </div>
</div>

如何使用CSS确定最合适的background-color应用于每个.magic-box元素？或者使用JS实现也可以。