如何将图像的背景颜色设置为黑色？

Question

我有一张 html 图片

<img src="abc.png">

并且我想要在浏览器中以较慢的连接速度加载图像时。图像的背景/占位符出现黑色。是否可以通过给图像 class 然后设置 css 属性 background-color: black;

<img class="black-back" src="abc.png">

<style>
.black-back {
background-color: rgb(0,0,0);
}
 </style>

Answer 1

你可以这样做：

<!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>

Answer 2

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>

如何将图像的背景颜色设置为黑色？

How to set background colour of an image as black colour?

html

css

stylesheet