如何仅使两个重叠图像的重叠部分响应透明？

Question

I used clip-path to overlap the two images and make only the overlap transparent:

 .bg { position: absolute; top: 0px; left: 0px; } .image-red { position: absolute; top: 150px; left: 150px; clip-path: polygon(0px 0px, 150px 0, 150px 50px, 50px 50px, 50px 150px, 0 150px); } .image-green { position: absolute; top: 200px; left: 200px; clip-path: polygon(100px 0, 150px 0, 150px 150px, 0 150px, 0 100px, 100px 100px); }

 <img class="bg" src="https://via.placeholder.com/500/ffffff/888888/500x500.png"> <img class="image-red" src="https://via.placeholder.com/150/ffeeee/ff8888/150x150.png"> <img class="image-green" src="https://via.placeholder.com/150/eeffee/008800/150x150.png">

However, this does not work if the image is placed in % , vw , vh ...

I don't want to use JavaScript if possible, is this a solution to this problem in CSS (or JavaScript)?

Answer 1

I don't think that it is possible to use pure CSS to do the above, but if someone has a solution using pure CSS, please do share ;-)

As for my solution, here's the minimal working example (adjust the position of the two images arbitrarily to see the effect).

 let redImage = document.querySelector('img.image-red') let greenImage = document.querySelector('img.image-green') let redImageRect = redImage.getBoundingClientRect() let greenImageRect = greenImage.getBoundingClientRect() function returnIntersectionPoints(rectOne, rectTwo) { let intersectionLeft = Math.max(rectOne.left, rectTwo.left) let intersectionTop = Math.max(rectOne.top, rectTwo.top) let intersectionRight = Math.min(rectOne.right, rectTwo.right) let intersectionBottom = Math.min(rectOne.bottom, rectTwo.bottom) if (intersectionLeft < intersectionRight && intersectionTop < intersectionBottom) return { left: intersectionLeft, top: intersectionTop, right: intersectionRight, bottom: intersectionBottom } else return false } function returnClipPathPolygon(rect, clippedRect) { let horizontalClip = rect.left === clippedRect.left ? 'left' : 'right' let verticalClip = rect.top === clippedRect.top ? 'top' : 'bottom' let polygonPoints = [] if (horizontalClip === 'left' && verticalClip === 'top') { polygonPoints.push([clippedRect.right, clippedRect.bottom]) polygonPoints.push([clippedRect.right, clippedRect.top]) polygonPoints.push([rect.right, rect.top]) polygonPoints.push([rect.right, rect.bottom]) polygonPoints.push([rect.left, rect.bottom]) polygonPoints.push([clippedRect.left, clippedRect.bottom]) } else if (horizontalClip === 'right' && verticalClip === 'top') { polygonPoints.push([clippedRect.right, clippedRect.bottom]) polygonPoints.push([rect.right, rect.bottom]) polygonPoints.push([rect.left, rect.bottom]) polygonPoints.push([rect.left, rect.top]) polygonPoints.push([clippedRect.left, clippedRect.top]) polygonPoints.push([clippedRect.left, clippedRect.bottom]) } else if (horizontalClip === 'left' && verticalClip === 'bottom') { polygonPoints.push([rect.right, rect.top]) polygonPoints.push([rect.right, rect.bottom]) polygonPoints.push([clippedRect.right, clippedRect.bottom]) polygonPoints.push([clippedRect.right, clippedRect.top]) polygonPoints.push([clippedRect.left, clippedRect.top]) polygonPoints.push([rect.left, rect.top]) } else if (horizontalClip === 'right' && verticalClip === 'bottom') { polygonPoints.push([rect.right, rect.top]) polygonPoints.push([clippedRect.right, clippedRect.top]) polygonPoints.push([clippedRect.left, clippedRect.top]) polygonPoints.push([clippedRect.left, clippedRect.bottom]) polygonPoints.push([rect.left, rect.bottom]) polygonPoints.push([rect.left, rect.top]) } let polygonString = 'polygon(' polygonPoints.forEach(point => { polygonString += `${point[0] - rect.left}px ${point[1] - rect.top}px, ` }) polygonString = polygonString.substring(0, polygonString.length - 2) polygonString += ')' return polygonString } let intersectionPoints = returnIntersectionPoints(redImageRect, greenImageRect) if (intersectionPoints) { redImage.style.clipPath = returnClipPathPolygon(redImageRect, intersectionPoints) greenImage.style.clipPath = returnClipPathPolygon(greenImageRect, intersectionPoints) }

 .bg { position: absolute; top: 0px; left: 0px; } .image-red { position: absolute; top: 10%; left: 20%; } .image-green { position: absolute; top: 25%; left: 15%; }

 <img class="bg" src="https://via.placeholder.com/500/ffffff/888888/500x500.png"> <img class="image-red" src="https://via.placeholder.com/150/ffeeee/ff8888/150x150.png"> <img class="image-green" src="https://via.placeholder.com/150/eeffee/008800/150x150.png">

Basically, what I'm doing is:

• Find intersecting points of the two rectangles (if intersection does occur) using the function returnIntersectionPoints .
• If there is an intersecting point, I will call the function returnClipPathPolygon to form the polygon string value to pass to clip-path for each of the images.

---

EDIT

The above code fails when one image can totally encompass the other image. Also, the returnClipPathPolygon function is a bit lengthy. As a result, I came up with a new idea to deal with said problems:

• Get the intersection points of the two rectangles
• Create a replica bg that acts as an overlay. This replica is clipped to a shape based on the intersection points (always will be a rectangle)
• Use that replica bg to cover the other two images (by using z-index ), thus making the two images appear transparent (when it's really not)

Here's the working example below:

 window.onload = (() => { let redImage = document.querySelector('img.image-red') let greenImage = document.querySelector('img.image-green') let redImageRect = redImage.getBoundingClientRect() let greenImageRect = greenImage.getBoundingClientRect() function returnIntersectionPoints(rectOne, rectTwo) { let intersectionLeft = Math.max(rectOne.left, rectTwo.left) let intersectionTop = Math.max(rectOne.top, rectTwo.top) let intersectionRight = Math.min(rectOne.right, rectTwo.right) let intersectionBottom = Math.min(rectOne.bottom, rectTwo.bottom) if (intersectionLeft < intersectionRight && intersectionTop < intersectionBottom) return { left: intersectionLeft, top: intersectionTop, right: intersectionRight, bottom: intersectionBottom } else return false } function returnClipPathInset(rect, intersectionPoints) { let insetTop = intersectionPoints.top let insetRight = rect.right - intersectionPoints.right let insetBottom = rect.bottom - intersectionPoints.bottom let insetLeft = intersectionPoints.left return `inset(${insetTop}px ${insetRight}px ${insetBottom}px ${insetLeft}px` } let intersectionPoints = returnIntersectionPoints(redImageRect, greenImageRect) if (intersectionPoints) { let bg = document.querySelector('img.bg') let bgRect = bg.getBoundingClientRect() let bgReplicaOverlay = document.createElement('img') let clipPathValue = returnClipPathInset(bgRect, intersectionPoints) bgReplicaOverlay.classList.add('bg') bgReplicaOverlay.src = bg.src bgReplicaOverlay.style.zIndex = 2 bgReplicaOverlay.style.clipPath = clipPathValue document.querySelector('body').prepend(bgReplicaOverlay) } })

 .bg { position: absolute; top: 0px; left: 0px; } .image-red { position: absolute; top: 10%; left: 10%; } .image-green { width: 100px; position: absolute; top: 15%; left: 12.5%; }

 <img class="bg" src="https://via.placeholder.com/500/ffffff/888888/500x500.png"> <img class="image-red" src="https://via.placeholder.com/150/ffeeee/ff8888/150x150.png"> <img class="image-green" src="https://via.placeholder.com/150/eeffee/008800/150x150.png">

The two codes above do not handle window resizing.