1

在此处输入图像描述

上图是一个想法，假设我有一个覆盖页面的固定 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 的方法，谢谢 看起来不错，但很难得到一个清晰的圆圈，也许如果我摆弄它 :) 在此处输入图像描述

4

2 回答 2

2

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

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);
于 2013-11-09T16:58:34.973 回答
1

You can get that more easily

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;
}

You just set the div with border-radius so that it is a circle, and background-color is the more transparent color in the circle. Then set a big border (I used 500px, you can go higher if you need to). To make positioning easy, set the same amount as a negative margin. And set the border color to whatever you want.

fiddle

If you want to make it easier to go to a determinate point in the screen, you can make the margin compansate fully the margin and the size. For instance

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

The margin compensates the border and half the size, so setting top = y left = x will set the circle to be around x y

于 2013-11-09T16:55:20.383 回答