透明子div是否可以使用? [英] Is a see-through child div possible?

问题描述

图像是祖父母div，黑色半透明覆盖层是父div，裁剪部分是子div.用户将看到祖父母图像和父叠加层，然后可以使用子裁剪器div对其进行裁剪.我尝试使用opacity和rgba背景失败.

The image is the grandparent div, the black translucent overlay is the parent div, and the cropped section is the child div. User will see the grandparent image and the parent overlay, then he can crop through it using the child cropper div. I tried and failed with opacity and rgba background.

这些疯狂的方法确实对我有用-

These crazy approaches do seem to work for me -

1. 还要在子div的背景中设置祖父母图像，然后更改background-position的x/y.
2. 将孩子和父母合并为一个div，并使用rgba border作为覆盖(我朋友的建议).
3. 在stackoverflow上找到了此，它使用box-shadow而不是边框​​，似乎与#2类似.

1. Set the grandparent image in the background of the child div as well and then change the x/y of the background-position.
2. Combine child and parent into one single div, and use rgba border as the overlay (my friend's suggestion).
3. Found this on stackoverflow, which uses box-shadow instead of borders and seems like a similar approach to #2.

我对#2和#3的不满是，我需要为虚线边框添加另一个div，以便用户清楚地知道自己正在裁剪什么.但我对所有这些方法的最大抱怨是，这些方法都不像 right 方法.

My minor gripe with #2 and #3 is that I'll need to add another div for the dashed borders so the user clearly knows what he's cropping. But my bigger gripe with all of them is that none of these looks like the right approach.

是否有适当/更好/2018式/如此明显，你这个白痴"的方式来做到这一点?

Is there a proper / better / 2018-ish / "its so obvious, you idiot" way to do this?

更新:这是基本标记(如果可以解决这个问题，我也可以使用其他标记)

Update: Here's the basic markup (I am okay with a different markup too if that helps in solving this)

#grandparentImage {
  background: url(https://9to5mac.com/wp-content/uploads/sites/6/2018/07/Desert-2.jpg) no-repeat;
  background-size: cover;
  position: relative;
  height: 500px;
}

#parentOverlay {
  background: rgba(0,0,0,0.5);
  height: 100%;
  position: relative;
}

#childCropper {
  border: 1px dashed #ccc;
  left: 50px;
  height: 100px;
  width: 100px;
  position: absolute;
  top: 50px;
}

<div id="grandparentImage">
  <div id="parentOverlay">
    <div id="childCropper"></div>
  </div>
</div>

修改:它不是>标记的问题，因为该问题与如何获取裁剪后的图像有关，所以该问题与如何向用户显示他正在裁剪的内容有关.有关UI而非数据的更多信息.

It is not a duplicate of the marked question, since that question deals with how to grab the cropped image, this one deals with how to show the user what he's cropping. More about UI than data.

推荐答案

您可以设置盒形阴影，#childCropper上的100vmax展开半径.这样，它将始终覆盖屏幕:

You can set box-shadow with 100vmax spread radius on the #childCropper. In this way it will always cover the screen:

#grandparentImage {
  background: url(https://9to5mac.com/wp-content/uploads/sites/6/2018/07/Desert-2.jpg) no-repeat;
  background-size: cover;
  position: relative;
  height: 500px;
}

#childCropper {
  position: absolute;  
  top: 50px;
  left: 50px;
  height: 200px;
  width: 200px;
  border: 1px dashed #ccc;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,0.5);
}

body {
  margin: 0;
}

<div id="grandparentImage">
  <div id="childCropper"></div>
</div>

这篇关于透明子div是否可以使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！