个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
25
4
如何制作这样的东西？
我尝试使用 3 个带有 position: absolute 的 div(其中 2 个带有 transformation: skew(...))。它有效但并不完美。例如在 IE 中顶部和底部 div 之间有一些空间(我不能把一个放在另一个上面因为颜色会变暗)，左右两侧也倾斜(虽然它可能可以通过添加两个白色来修复此处为 div)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
html {
display: table;
margin: auto;
}
body{
display: table-cell;
}
.container {
padding: 15px;
margin-bottom: 30px;
position: relative;
}
.mask {
background: rgba(0, 0, 0, 0.78);
position: absolute;
z-index: 99;
}
.mask-top {
top: 0;
left: 0;
width: 100%;
height: 70%;
}
.mask-left {
width: 43%;
height: 30%;
left: 0;
bottom: 0;
margin-left: -24px;
transform: skew(-16deg);
}
.mask-right {
width: 43%;
height: 30%;
right: 0;
bottom: 0;
margin-right: -24px;
transform: skew(16deg);
}
</style>
</head>
<body>
<div class="container">
<img src="http://i.imgur.com/cnvTRdz.png"/>
<div class="mask mask-top"></div>
<div class="mask mask-left"></div>
<div class="mask mask-right"></div>
</div>
</body>
</html>
http://jsfiddle.net/sw4tr5bc/2/
有没有更好的办法？除了 IE 不支持的 CSS Masking。
更新:
这是工作解决方案(使用 SVG，如答案中所建议)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
html {
display: table;
margin: auto;
}
body{
display: table-cell;
}
.container {
padding: 15px;
margin-bottom: 30px;
position: relative;
}
.mask {
position: absolute;
z-index: 99;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="container">
<img src="http://i.imgur.com/JlWbC0z.png"/>
<svg class="mask" width="100%" height="100%" viewbox="0 0 798 798">
<path d="M0 0 L0 798 L270 798 L340 570 L455 570 L520 798 L798 798 L798 0 L0 0 Z" fill="black" opacity="0.78"></path>
</svg>
</div>
</body>
</html>
最佳答案
只需制作一个内联 SVG 并将其放在您的图像上，例如看看this SVG :
<svg width="200" height="200">
<path d="M0 0 L200 0 L200 200 L150 200 L150 150 L100 150 L100 200 L0 200 L0 0 Z" fill="black" />
</svg>
这应该从 IE9 开始工作(当然它在所有现代浏览器中工作)。
这看起来并不是您想要实现的结果，但这只是一个方向。事实上，要成功地将它应用到您的案例中，您只需更改上面 SVG 中的几个数字。
过程的一些解释:
M0 0 - put the start of your path to x=0 y=0
L200 0 - line to x=200 y=0; then with some more lines you just draw your figure until you return by L0 0 to the beginning
fill="black" sets the color of the figure
所以最后你可以使用这个简单的符号构建任何路径。然后您可以在 SVG 上使用不透明度使背景图片可见。
另外，为了改进您的代码并避免污染 HTML，您可以将此 SVG 作为数据 URI 放入您的 CSS 中，例如see my another answer它还使用 SVG 来解决 CSS 问题，以了解如何做到这一点。请记住，如果您还希望此 CSS 方法在 IE9 中工作，则需要将其编码为 URL。无论如何，这只是一 block 糖，它也可以像内联 HTML SVG 一样毫无问题地工作。
关于html - 带孔的半透明覆盖层/掩模，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33584427/
25
4
0
我想检测(并关闭)封闭网格的开口和孔洞/镂空部分。我知道对于一个开放的网格，这可以通过找到边界边(只属于一个三角形的边)来完成，如 here 所述。 . 但是对于不存在此类边界边的封闭网格呢？下面是一
我试过https://docs.konghq.com/getting-started-guide/2.1.x/expose-services/我也有本地服务器:kong/2.2.1我可以同时注册服务和
我在我的应用程序中使用 logback(SiftingAppender 和 RollingFileAppender)。每当请求进来时，它们将根据 url 查询中的 id 记录到不同的文件中。 这工作得
我在 ARKit 上遇到了一个问题，我需要帮助。我正在做一个小演示，我在场景中放置了一个简单的 SCNTorus 几何体，我试图将一个小球 (SCNSphere) 扔进环面孔中。问题是球在中间弹跳而不
编辑 经过更多研究但仍然没有解决方案，我添加了实质性编辑以及指向 .shp 文件的链接。 The shape file is included here 我有一个包含 9 个多边形的 SpatialP
有没有一种简单直接的方法可以使用 opencv 3.1 python 从图像中提取内部轮廓(孔)？ 我知道我可以使用“区域”作为条件。但是，如果我更改图像分辨率，“区域”就不一样了。 例如，这张图片:
我正在审查 Angular 中的模板项目 引导组件有一个如下所示的 HTML 模板。很有道理。应用程序标题、应用程序侧边栏等标签将包含由带有匹配选择器的组件提供的内容。这一切都检查出来了。
案例场景: $ cat Status.txt 1,connected 2,connected 3,connected 4,connected 5,connected 6,connected 7,dis
我是一名优秀的程序员,十分优秀！