css如何让两张图叠在一起

可以使用CSS中的`position`属性来实现两张图叠在一起。具体实现方法如下：

1. 将两张图片放在同一个容器中，可以使用`<div>`标签来作为容器。
2. 使用CSS设置容器的`position`属性为`relative`，并设置两张图片的`position`属性为`absolute`。
3. 分别设置两张图片的`top`和`left`属性，使它们重叠在一起。

示例代码如下：

HTML：

<div class="container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
</div>

CSS：

.container {
  position: relative;
}

.container img {
  position: absolute;
}

.container img:first-child {
  top: 0;
  left: 0;
}

.container img:last-child {
  top: 10px;
  left: 10px;
}

在上面的代码中，我们设置了两张图片重叠在一起，第一张图片的位置是容器的左上角，第二张图片则向下和向右移动了10像素。你可以根据具体需求自行调整位置。

相关问题

css如何把两个图片叠在一起 显示不同的透明度 示例代码

可以使用CSS的position属性和z-index属性来实现两张图片的叠加效果，opacity属性来设置透明度。以下是示例代码：

HTML代码：

<div class="image-container">
  <img src="image1.jpg" alt="image1">
  <img src="image2.jpg" alt="image2">
</div>

CSS代码：

.image-container {
  position: relative;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
}

.image-container img:first-child {
  z-index: 1;
  opacity: 0.5; /* 设置第一张图片的透明度为50% */
}

在上面的代码中，我们首先设置了一个父容器 `.image-container`，并将其定位为相对定位。然后，我们将两张图片都定位为绝对定位，使它们可以重叠在一起。

接着，我们使用 `z-index` 属性将第一张图片置于第二张图片的上方，并使用 `opacity` 属性将其透明度设置为50%。

这样，我们就可以实现两张图片的叠加效果，并且显示不同的透明度。

两站图片重叠在一起，通过移动中间线段，来显示在最下面的图片的html，css，js

HTML代码：

<div class="image-container">
  <div class="image-wrapper">
    <img src="image1.jpg">
    <img src="image2.jpg">
  </div>
  <div class="divider"></div>
  <div class="bottom-image">
    <img src="image3.jpg">
  </div>
</div>

CSS代码：

.image-container {
  position: relative;
  width: 500px;
  height: 300px;
}

.image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.divider {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background-color: #fff;
  transform: translateX(-50%);
  cursor: ew-resize;
}

.bottom-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bottom-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
}

JavaScript代码：

const imageContainer = document.querySelector('.image-container');
const divider = document.querySelector('.divider');
const images = document.querySelectorAll('.image-wrapper img');
const bottomImage = document.querySelector('.bottom-image img');

let isDragging = false;

divider.addEventListener('mousedown', () => {
  isDragging = true;
});

imageContainer.addEventListener('mousemove', (e) => {
  if (isDragging) {
    const dividerPosition = e.pageX - imageContainer.offsetLeft;
    const containerWidth = imageContainer.offsetWidth;
    const dividerPercentage = dividerPosition / containerWidth;
    
    images[0].style.clipPath = `inset(0 ${100 - dividerPercentage * 100}% 0 0)`;
    images[1].style.clipPath = `inset(0 0 0 ${dividerPercentage * 100}%)`;
    
    divider.style.left = `${dividerPosition}px`;
  }
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});

这段代码使用了事件监听来响应鼠标在中间线段上的操作，并通过计算中间线段的位置来动态改变两张图片的裁剪路径，从而实现两张图片的重叠。同时，使用CSS的mix-blend-mode属性，将最下面的图片应用于screen混合模式，使其能够与上面的图片重叠，并且只显示上面图片中没有显示的区域。

您可以根据自己的需要修改CSS样式和JavaScript代码，使其适应您的网页设计。