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

Question

我的图像资产中有一些徽标。这些徽标将导入到网站中。每个标志都有随机的纯色（可以是白色、黑色、灰色、红色、蓝色、绿色等）和透明背景。例如：

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

.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

元素？

Answer 1

@jordy

我不认为一种背景颜色适合所有标志，因为白色很亮，灰色，黑色更暗。你必须为这些标志选择最少两种或最多三种背景颜色。

试试这个来选择颜色。 https://coolors.co/contrast-checker