CSS - 如何在图标周围添加一个颜色与图标本身不同的圆圈？

问题描述 投票：0回答：1

我希望白色保持不变，带有另一种颜色的圆形背景。像这样：https://imgur.com/a/RT33aXz

我尝试在 CSS 中的 img 上使用背景颜色：棕色，但这只是将图标中的白色更改为棕色。
还尝试将 img 包装在 div 中并为该 div 提供不同的背景颜色。但同样的事情发生了。

有什么想法吗？

此示例仅将电话图标的整个白色覆盖为棕色。当我将图像包装在 div 中时尝试更改背景颜色时，也会发生同样的情况。

img {
  height     : 30px;
  width      : 30px;
  background : rgba(109, 73, 59, 255);
}

<img src="image/phone.png" alt="">
css icons background-color
1个回答
0
投票

以下是如何执行此操作的示例： 我们将图像放入圆形 div 中。

<style>
    .circle {
        display: flex;
        /* CIRCLE SIZE */
        width: 110px;
        height: 110px;
        background: red;
        /*BACKGROUND COLOR HERE*/
        border-radius: 50%;
        justify-content: center;
        align-items: center;
    }
    
    .circle>img {
        background-repeat: no-repeat;
        /* IMAGE SIZE */
        width: 30px;
        height: 30px;
    }
</style>

<body>
    <div class="circle">
        <img src="image/phone.png">
    </div>
</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.