白色部分是网站水平居中的容器div。条纹是 body 元素的背景图像。我有剩余的哑铃作为图片，我想把它放在容器外面，这样就有一个完整的图片。
通常它会将图像绝对定位在容器 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
}
最佳答案
您可以设置以下 css 来隐藏图像中超出 div#container 的部分
#container
{
overflow:hidden;
}
上述方法将裁剪图像，如果您不想这样做，您可以设置它，使图像在其容器中具有最大宽度
#pimg
{ width:800px; }
#pimg img
{ max-width:100%; }
关于css - 如何将图像放置在具有透明背景的div之外？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19875086/