CSS遮罩或替代方法来实现径向焦点

Question

上面的图片是一个想法，假设我有一个覆盖页面的固定 dix，我想专注于一个区域。

.fixed-full {
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
 }

我没有看到上面的内容与我想要完成的工作一起使用，我需要使用蒙版或径向渐变。

我读了一些关于 webkit masking 和 svg masking 的 tuts，弄起来有点乏味，我希望得到建议。

我玩了一些盒子阴影box-shadow: -20px 30px 380px 280px rgba(0, 0, 0, 0.7) inset;，它的效果很酷，但不是我想要的。

不介意使用 javascript 解决方案。

CSS 结果： 感谢 vals

CSS 结果： 基于 Rémi 的方法，谢谢 看起来不错，但很难得到一个清晰的圆圈，也许如果我摆弄它:)

Answer 1

您可以使用径向渐变来实现您想要的效果，例如（带着红色面具）：

background: radial-gradient(200px 100px at 100px 50px, rgba(255, 0, 0, 0) 40%, rgba(255, 0, 0, .8));

就像这个小提琴http://jsfiddle.net/gmqFe/1/ （注​​意：文本有黄色背景，面具是红色）

为了更好地控制模糊区域，您还可以使用像素而不是百分比作为停止位置（高于，40%），那么只有前两个参数的比率很重要，例如：

background: radial-gradient(10px 5px at 100px 50px, rgba(255, 0, 0, 0) 200px, rgba(255, 0, 0, .8) 202px);

Answer 2

您可以更轻松地获得它

CSS

.mask {
position: absolute;
background-color: rgba(200, 200, 200, 0.5);
border-radius: 50%;
width: 116px;
height: 116px;
left: 29px;
top: 61px;
border-color: rgba(20, 20, 20, 0.7);
border-width: 500px;
margin: -500px;
border-style: solid;
}

您只需将 div 设置为border-radius，使其为圆形，而background-color 是圆形中更透明的颜色。然后设置一个大边框（我用的是500px，如果需要可以走高一些）。为了使定位更容易，设置与负边距相同的数量。并将边框颜色设置为您想要的任何颜色。

fiddle

如果您想更轻松地转到屏幕中的某个确定点，您可以使边距完全补偿边距和大小。比如

border-width: 1000px;
height: 100px;
width: 100px;
margin: -1050px;

边距补偿边框和一半大小，因此设置 top = y left = x 将设置圆在 x y 周围