Question

我可以通过下面的代码将一张照片放在另一张照片上但它并不完全在另一张照片的中心。如果前景照片大于背景照片。这应该自动调整大小以适应中心。我怎么能达到这个效果？任何提示都将受到欢迎！

<!Doctype>
<html>
<head>
    <style>
        .background
        {
            position:relative;
            top: 10px;
            left: 10px;
            z-index: 1;
            margin:  0 auto;
        }
        .foreground
        {
            position:absolute;
            top: 25px;
            left: 25px;
            z-index: 2;
            margin:  0 auto;
        }
    </style>
</head>
<body>
<img src="frame.png" class="background" >
<img src="foreground.png" class="foreground">
</body>
</html>

Answer 1

你可以通过几种方式实现它。但是，正如你的课程提到的那样，你可能正在寻找div的背景和前景图像。你应该尝试这样的事情

<body>
  <div class="container">
    <img src="foreground.png" class="foreground">
  </div>
</body>

使用以下代码用css设置样式：

.container{ 
    background-image: url("frame.png");
    background-size: cover;
}

如果你的img大小正在改变，请尝试添加：

    img {
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

同时检查：How to make an image center (vertically & horizontally) inside a bigger div

Answer 2

这是我刚刚制作的一个例子，创建一个嵌套的div并让图像成为他们的背景。将嵌套的div居中，并为它们提供某种高度和宽度。如果您希望前景图像缩小，如果您为前景图像指定一个百分比宽度，它将永远不会大于父图像。

.background{
  height:400px;
  width:100%;
  display:block;
  background-image:url("http://www.fillmurray.com/400/900");
  background-size:cover;
  background-position:center center;
}
.foreground{
  height:300px;
  width:50%;
  display:block;
  margin:auto;
  background-image:url("http://www.fillmurray.com/200/300");
  background-size:cover;
  background-position:center center;
    position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<!Doctype>
<html>
<body>
<div class="background">
<div class="foreground">
</div>
</div>
</body>
</html>

如何通过CSS将一张照片放在另一张照片上

2 个答案: