如何用CSS实现手机Logo背景与Flexbox融合并改为白色？

问题根源 #

• 类名不匹配：CSS中定义的样式类是.img-color，但HTML里写的是image-color，导致样式完全无法生效。
• 滤镜参数错误：仅用grayscale(100%)只能将图片转为灰色，无法实现白色效果，需要调整滤镜组合。

修改后的代码 #

CSS 代码 #

/* common nav style */
.navigation-wrapper{
    height: 190px;
    background-color: darkslateblue;
    color: #cbcbcb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 60px 100px;
}
.contact-hours-wrapper {
    color: rgb(255, 0, 153);
}
#adress-wrapper {
    color: red;
}
/* common styles */
body {
    margin: auto;
}
.left-colom {
    display: flex;
    align-items: center;
}
.icon {
    margin-right: 15px;
}
/* 修正类名并调整滤镜实现白色效果 */
.img-color img {
    /* 反转颜色+亮度调整，将任意颜色logo转为白色 */
    filter: invert(100%) brightness(100%);
    /* 继承父容器背景色，确保边缘和导航栏融合 */
    background-color: inherit;
}
/* 单独处理地址栏的logo */
#adress-wrapper img {
    filter: invert(100%) brightness(100%);
    background-color: inherit;
}

HTML 代码（仅修正类名部分） #

<!-- Navigation wrapper -->
<div class="navigation-wrapper">
    <!-- hours+phone -->
    <div class="left-colom">
        <div class="icon">
            <!-- 修正类名为img-color -->
            <div class="img-color">
                <div class="contact-hours-wrapper">
                    <img src="C:\Users\Ahmed\Desktop\HTML-CSS\phone-logo2.jpg" width="40" height="40" alt="logo">
                    555-555-555
                    10AM-Midnight
                </div>
            </div>
        </div>
    </div>
    <!-- address wrapper -->
    <div id="adress-wrapper">
        <img src="C:\Users\Ahmed\Desktop\HTML-CSS\phone-logo2.jpg" width="50" height="50" alt="logo">
        123 belvin, italy
    </div>
    <!-- link wrapper -->
    <div>
        <div><a href="C:\Users\Ahmed\Desktop\HTML-CSS\contact.html">Contact</a></div>
        <div><a href="C:\Users\Ahmed\Desktop\HTML-CSS\about.html">About</a></div>
        <div><a href="C:\Users\Ahmed\Desktop\HTML-CSS\Menu.html">Menu</a></div>
    </div>
</div>

关键说明 #

1. 类名匹配：将HTML中的image-color改为img-color，确保CSS规则能正确作用到目标元素。
2. 滤镜效果：invert(100%)反转图片所有颜色，配合brightness(100%)保证白色的纯净度，无论原logo是什么颜色都能转为白色。
3. 背景融合：给img设置background-color: inherit，让它继承.navigation-wrapper的深蓝色背景，避免logo边缘出现异色背景。
4. 全局覆盖：针对地址栏未嵌套在.img-color中的logo，单独用ID选择器设置相同样式，确保所有logo效果统一。

内容的提问来源于stack exchange，提问作者Ahmed Dhia