Css 如何将图像放置在具有透明背景的div之外？_Css

Css 如何将图像放置在具有透明背景的div之外？

css

Css 如何将图像放置在具有透明背景的div之外？,css,Css,白色部分是一个容器div，水平居中于网站上。条纹是身体元素的背景图像。我把哑铃的其余部分作为一张图片，我想把它放在容器外面，这样就有了一张完整的图片通常，它会将图像绝对定位在container div中，并将其向右移动一点但我的问题是，整个图像的背景是白色的。因此，结果是：有办法解决这个问题吗 <body> <div id="container"> <div id="pimg"><img src="../images/image

白色部分是一个容器div，水平居中于网站上。条纹是身体元素的背景图像。我把哑铃的其余部分作为一张图片，我想把它放在容器外面，这样就有了一张完整的图片

通常，它会将图像绝对定位在container div中，并将其向右移动一点

但我的问题是，整个图像的背景是白色的。因此，结果是：

有办法解决这个问题吗

<body>
   <div id="container">
      <div id="pimg"><img src="../images/image_part.png"></div>
   </div>
</body>

html {
    background-image: url('../images/stripes.png');
}

#container {
    position: relative;
    background-color: white;
    background-image: url('../images/image.png'); // first picture
    background-repeat: no-repeat;
    background-position: top right;
    width: 800px;
    height: 90%;
    margin: 0 auto;
}

#pimg {
    position: absolute;
    top: 0;
    right: -100px; // second image
}


html{
背景图像：url（'../images/stripes.png'）；
}
#容器{
位置：相对位置；
背景色：白色；
背景图像：url（'../images/image.png'）；//第一张图片
背景重复：无重复；
背景位置：右上角；
宽度：800px；
身高：90%；
保证金：0自动；
}
#皮姆{
位置：绝对位置；
排名：0；
右：-100px；//第二个图像
}

您可以设置以下css来隐藏图像中超出div容器的部分

#pimg 
{ width:800px; }
#pimg img 
{ max-width:100%; }

上面的方法将裁剪图像，如果您不想这样做，您可以将其设置为使图像具有其容器的最大宽度

#pimg 
{ width:800px; }
#pimg img 
{ max-width:100%; }

主要问题是PNG的背景是白色的，而不是您想要的透明背景：

在Adobe Photoshop或GIMP等图像编辑器软件中编辑“image.png”
在图像编辑器中打开它
e渲染背景（因为您有一个PNG，是的，但它有一个白色背景）
以PNG或GIF格式保存图像，因为JPEG不支持透明背景
提示：Photoshop有一个保存图片的选项，
```
Control（Mac中的命令）+Shift+alt+S
```
，这个选项可以帮助你优化图像，调整其参数

这里有一个Photoshop教程：

给出您的代码或示例，这样我们就可以为您的问题提供建议或解决方案。编辑后，这就是全部代码。