更改 div 和图像的背景

Question

As the title suggests, I wanted to add a background both to the image and the div itself. I see it's being used on amazon but can't seem to figure out the trick behind it. What I mean is, the image has a white background, but the image as it's been applied onto the div doesn't show that white space. Like so:

Image with white background:

Image being rendered onto the div:

Here is what I have tried so far:

 .grid-wrapper { display: grid; grid-template-columns: 1fr 2fr; background: #fff; box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; border-radius: 4px; }.image-block { background: red; margin: auto; }.image-block img { width: 100% height: 100%; }.information { padding: 10px; }.information p { font-size: 0.875rem; line-height: 1.5; }

 <div class="grid-wrapper"> <div class="image-block"> <img src="https://m.media-amazon.com/images/I/61xgpXecLML._AC_UY218_.jpg"> </div> <div class="information"> <p>Logitech M510 Wireless Computer Mouse for PC with USB Unifying Receiver - Graphite</p> <p>Price: $100</p> </div> </div>

You can see a bit of the background: red; just under the image.

Answer 1

If you want a transparent image background you should use a PNG image, then for the red background just remove the background color from the image-block

.image-block {
    margin: auto;
}

Answer 2

The problem here is that the first image you posted has a white background, but contrary to your assumption the second image doesn't have a white background, it has a transparent background and that makes all the difference.
When wrapping around an image with a transparent background a div element will be displayed on the transparent background. That's likely what is shown in the second image.
Then there's the question, How do you use an image with a transparent background?
The image you are using is in.jpg format that doesn't support transparent background, you can use either.png or the.svg for that. It should work without changing the code other than the image import.

Answer 3

you should use png image and then whatever background color you need can be given to div wrapping the image.

Answer 4

With a.jpg image you may cheat as this: I'm sorry for my English, I'm not sure to understand what's your goal...

 .grid-wrapper { display: grid; grid-template-columns: 1fr 2fr; background-color: #ffffff; box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; border-radius: 4px; }.image-block { background-color: red; margin: auto; padding:20px; }.image-block img { }.image-container{ background-color: white; padding:20px; }.information { padding: 10px; }.information p { font-size: 0.875rem; line-height: 1.5; }

 <div class="grid-wrapper"> <div class="image-block"> <div class="image-container"> <img src="https://m.media-amazon.com/images/I/61xgpXecLML._AC_UY218_.jpg" alt="image"> </div> </div> <div class="information"> <p>Logitech M510 Wireless Computer Mouse for PC with USB Unifying Receiver - Graphite</p> <p>Price: $100</p> </div> </div>