javascript - How to make whole page black except for some portion? - Stack Overflow

admin管理员组

文章数量:1425708

I am trying to make an effect in which the whole page would be dark except for a specific part that'll be transparent. That part would be a circle which would be moving randomly. Now where ever this circle goes on the page, content under the circle would be able to be seen while the whole remaining page would remain dark.

Where I AM?
I have created the script that'll move the circle randomly on the page but i can't get the effect. Don't know what to do.

Please take a look on the following image. It'll give you a better idea of what i am trying to achieve.

Now consider that this transparent circle is moving randomly on the page ( i have already made the script for that). Kindly take a look on this fiddle. It'll show where i am. Thank you..

I am trying to make an effect in which the whole page would be dark except for a specific part that'll be transparent. That part would be a circle which would be moving randomly. Now where ever this circle goes on the page, content under the circle would be able to be seen while the whole remaining page would remain dark.

Where I AM?
I have created the script that'll move the circle randomly on the page but i can't get the effect. Don't know what to do.

Please take a look on the following image. It'll give you a better idea of what i am trying to achieve.

Now consider that this transparent circle is moving randomly on the page ( i have already made the script for that). Kindly take a look on this fiddle. It'll show where i am. Thank you..

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Sep 15, 2014 at 14:10 Awais Umar asked Sep 15, 2014 at 14:06 Awais UmarAwais Umar 2,07744 gold badges2828 silver badges4747 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

This is simple matter of adding a giant box shadow to the moving div.

No extra elements required.

Unprefixed CSS

box-shadow: 0 0 0 9999px black;

JSfiddle Demo

Try using CSS Masks:

Just draw a circle in photoshop and use CSS techniques to apply the mask on the image.

CSS:

 -webkit-mask-image: url('image.png');

More info here: http://thenittygritty.co/css-masking and here: http://www.html5rocks./en/tutorials/masking/adobe/

本文标签： javascriptHow to make whole page black except for some portionStack Overflow