Html Question posted in
Some basic documentation can be found here.

Html – how to change image color in CSS

I’m a css/html/js all that domain – beginner. so i am learning to code an app

I added a white png to a code:

    <div class="todo-app">
        <h2>To-Do list <img src="images/clock.png" alt=""></h2>
        <div class="row">
            <input type="text" id="input-box" placeholder="Add your text">
            <button>Add</button>
    </div>

.todo-app h2 img {
    width:150px;
    margin-left: 10px;
}

then i got the idea to change to turn the original white into another color, directly in the code (to fit my app theme)

how can i do this ?

i tried to use the filters

with for example :

filter: saturate();

or

background:

/*or */

color:

i admit that i am not used to those tools yet

Tags:

2

Answers


  1. 0

    Filter is the right CSS property to use in this case, there are a lot more to it than just saturate. This link should help. https://css-tricks.com/almanac/properties/f/filter/

    Login or Signup to reply.
  2. 0 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .todo-app h2 img {
    width:150px;
    margin-left: 10px;
    filter: sepia(100%) hue-rotate(180deg) saturate(500%); /* Rotate the hue by 180 degrees (changes white to a different color) */
}
    </style>
</head>
<body>
    <div class="todo-app">
        <h2>To-Do list <img src="https://www.amitree.com/wp-content/uploads/2021/08/the-pros-and-cons-of-paper-to-do-lists.jpeg" alt="image"></h2>
        <div class="row">
            <input type="text" id="input-box" placeholder="Add your text">
            <button>Add</button>
    </div>
</body>
</html>

    In this example, sepia(100%) converts the white areas of the image to a sepia tone, which can then be further adjusted using hue-rotate and saturate to achieve the desired color effect. You can experiment with different values for hue-rotate and saturate to get the color you want.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search