Question

enter image description here

白色部分是在网站上水平居中的容器div。条纹是身体元素的背景图像。我将哑铃的其余部分作为图片，我想将它放在容器外面，这样就可以得到完整的图片。

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

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

enter image description here

有没有办法解决这个问题？

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

Answer 1

您可以设置以下css来隐藏div＃container

之外的图像部分

#container
{
overflow:hidden;
}

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

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

Answer 2

主要问题是你的PNG有一个白色背景而不是你想要的透明背景：

在Adobe Photoshop或GIMP等图像编辑软件中编辑“image.png”
在图像编辑器中打开它
设置背景（因为你有PNG，是的，但它有白色背景）
以PNG或GIF格式保存图像，因为JPEG不支持透明背景
提示：Photoshop可以选择为网络保存图片Control(Command in Mac) + Shift + alt + S，此选项可以帮助您优化调整其参数的图像

这是一个Photoshop教程：http://www.youtube.com/watch?v=PLA2FaOXkkg

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

2 个答案: