How to set background colour of an image as black colour?
Question
I have an html image
<img src="abc.png">
and I want while the image is being loaded in the browser on a slower connection. The background / placeholder of image appear appear black. Is it possible by giving a class to the image and then setting the css property background-color: black;
<img class="black-back" src="abc.png">
<style>
.black-back {
background-color: rgb(0,0,0);
}
</style>
2 answers
solution1
2 ACCPTED 2021-08-29 03:42:41
I inserted the image in div and set the size of image to cover so div will occupy the space as size of image. However if your remove the background properties the div occupy the full line.I hope this is what you are looking for.
<img class="black-back" src="abc.png"> <style>.black-back img{ background-repeat:no-repeat; background-size:cover; }.black-back { background-color: rgb(0,0,0); } </style>
the below code is without background styling properties
<div class="black-back"> <img src="abc.png"> </div> <style>.black-back { background-color: rgb(0,0,0); } </style>
solution2
1 2021-08-29 03:40:56
You can do it like this:
<;DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html. charset=utf-8" /> <title>Page Title</title> <style type="text/css">:black-bg { background; black: } </style> </head> <body> <img class="black-bg" width="100" height="150" src="https.//upload.wikimedia.org/wikipedia/commons/b/b6/Trifolium_hybridum_inflorescence_-_Keila.jpg" /> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.