0

在此处输入图像描述

白色部分是在网站上水平居中的容器 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
}
4

2 回答 2

0

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

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

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

于 2013-11-09T13:02:29.440 回答
0

您可以设置以下 css 来隐藏 div#container 之外的图像部分

#container
{
overflow:hidden;
}

上面的方法将裁剪图像，如果你不想这样做，你可以设置它，以便图像具有最大宽度它的容器之一

#pimg 
{ width:800px; }
#pimg img 
{ max-width:100%; }
于 2013-11-09T11:10:31.333 回答