how to remove the white image html-css like png?

Level 39

css styles your html page, meaning it works on html element. Since your image is in one elemennt you cannot have different styles for this elt. We can imagine having a stack of different elements with the property z-index but it will be awful to code/manage.

The only/best thing you have to do is to recreate your image to remove the background and manage it by directly by css or with a second image/element.

Level 1

@sr57

How to recreate my image to remove the background?

Level 102

@kar Open it in an image editor and remove the white background (eraser tool)

Level 1

@Sinnbeck I know, I mean by CSS

Level 39

no way

Level 102

@kar How would css know the difference between the white around the image, and the white on the screen?

Level 102

Found an example of how to do it with css, but as I said, it will most likely make the white in the screen transparent as well https://codepen.io/dovidweisz/pen/PyyZbe?editors=1100

1 like

sr57

Level 39

@Sinnbeck

nice example ... anyway. My previous answer should be 'no exact way'

Level 102

@sr57 Yeah I completely agree with you. I would never do this with css :)

Level 1

@Sinnbeck

I changed this code

<div class="tracking-wider">
    <img class="w-100 d-inline-block" src="{{ asset('storage/'.$service->image) }}">
</div>

.tracking-wider img {
    mix-blend-mode: multiply;
}

I see this demo.

My problem is still not solved. Where is my real photo?

Level 102

@kar how would I know? First if I already suggested doing it in a image program and explained why. Secondly I don't have access to your image so how could I test it? I gave a link to a page where it kinda works and expected you would test your image there

1 like

Level 1

@Sinnbeck For example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .tracking-wider {
            background-color: blue;
            width: 200px;
            height: 200px;
            position: relative;
        }
        .tracking-wider img {
            mix-blend-mode: multiply;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 100%;
        }
    </style>
</head>
<body>
<div class="tracking-wider">
    <img src="https://dkstatics-public.digikala.com/digikala-products/c5c4a0bb88dc312a4c2f6de0b1567ef0da31a2d9_1630140406.jpg" alt="">
</div>
</body>
</html>

Best Answer

Level 102

@kar try setting the background color to #00ff00 in the link I shared an you will see the same. Aka not possible. Lightgray background only

1 like