change the background of the logo to mix with the background of the flexbox in CSS-CodePudding

Hi i'm trying the change the background of the phone logo to mix with the background of the flexbox in CSS and if possible use CSS to change the color of the phone to white yet this code i use in CSS isn't working

CSS code:

/* common nav style */

.navigation-wrapper{

    height: 190px;
    background-color: darkslateblue;
    color: #cbcbcb;
    /* flexbox container */
    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 {
    filter: grayscale(100%);
    background-color: darkslateblue;
  }

this is the main HTML code:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html > <![endif]-->
<!--[if IE 7]>         <html > <![endif]-->
<!--[if IE 8]>         <html > <![endif]-->
<!--[if gt IE 8]>      <html > <![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Homepage</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <!--[if lt IE 7]>
            <p >You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- Navigation wrapper -->
        <div >
            <!-- hours phone -->
            <div >
                <div >
                    <div >
                        <div >
                            <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>
                <!-- nav link -->
                <div>
                    <a href="C:\Users\Ahmed\Desktop\HTML-CSS\contact.html">Contact</a>
                </div>
                <!-- nav link -->
                <div>
                    <a href="C:\Users\Ahmed\Desktop\HTML-CSS\about.html">About</a> 
                </div>
                <!-- nav link -->
                <div>
                    <a href="C:\Users\Ahmed\Desktop\HTML-CSS\Menu.html">Menu</a> 
                </div>
            </div>
        </div>
    </body>
</html>

yet it's always remain the same:

enter image description here

i tried background and filter tag yet it didn't work

CodePudding user response：

You can change your logo from black to white using:

-webkit-filter: invert(100%); /* Safari/Chrome */
filter: invert(100%);

I don't think you can remove the checkered from the img using CSS. If the image has a white background you can use mix-blend-mode: color-burn; to remove it, use mix-blend-mode: screen; on a black background.

CodePudding user response：

Download the transparent png or svg from pixabay and replace the image with the checkered background.

Use this filter to convert the icon from black to white #ffffff

.icon {
  filter: invert(100%) sepia(4%) saturate(758%) hue-rotate(269deg) brightness(118%) contrast(100%);
}

Check this demo to see the working code: Demo