那些遇到过的问题

相关疑难解决方法(0)

透明空心或切圆圈

是否可以仅使用CSS 切出空心圆？

我们都可以这样做:

正常的CSS圈子

但我们可以这样做吗？

div中的透明空心圆

的圆必须是中空的,并且透明.因此,通过在a上放置一个纯色圆圈就无法解决问题div.

css svg transparency css3 css-shapes

chr*_*ris
2017 01-03
55
推荐指数
5
解决办法
4万
查看次数

透明的儿童div可能吗？

最后结果

图像是祖父母div,黑色半透明叠加是父div,裁剪部分是子div.用户将看到祖父母图像和父叠加,然后他可以使用子裁剪器div裁剪它.我试过并失败了opacity和rgba背景.

这些疯狂的方法似乎对我有用 -

  1. 在子div的背景中设置祖父母图像,然后更改x/ y的background-position.
  2. 将孩子和父母组合成一个单独的div,并rgba border用作叠加(我朋友的建议).
  3. 在stackoverflow上找到了这个,它使用box-shadow而不是边框​​,看起来像#2的类似方法.

我对#2和#3的轻微抱怨是我需要为虚线边框添加另一个div,以便用户清楚地知道他正在裁剪什么.但我对他们所有人的更大抱怨是,这些都不是正确的方法.

有没有一个合适的/更好的/ 2018-ish /"它如此明显,你这个白痴"的方式来做到这一点？

更新:这是基本标记(如果有助于解决此问题,我也可以使用不同的标记)

#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;
}
Run Code Online (Sandbox Code Playgroud) 
<div id="grandparentImage">
  <div id="parentOverlay">
    <div id="childCropper"></div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

编辑:这不是标记问题的重复 …

html javascript css

rmn*_*rmn
2018 10-02
10
推荐指数
1
解决办法
300
查看次数

标签 统计

css ×2

css-shapes ×1

css3 ×1

html ×1

javascript ×1

svg ×1

transparency ×1