css3 可以实现背景虚化但是一块不虚化的效果么-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

css3 可以实现背景虚化但是一块不虚化的效果么

迷茫 2017-04-17 11:10:56

[CSS3讨论组]

715

大概就是这个效果其余的区域只是opacity不是100%而已但是有一块是原样

这个不是在图片上而是页面上处理

这个东西的用途就是在页面上做一个新功能提示比如网页上多出一个新功能为了让用户注意到可能在页面加载进来的时候我用一个黑色带透明的遮罩层把其余的位置全盖住但是只把我要强调的地方露出来

一个实现方式我想到的是把那个地方做成图片扔到遮罩层上面但是不可能每次都做图片啊

迷茫

业精于勤，荒于嬉;行成于思，毁于随。

全部回复(2)

伊谢尔伦2017-04-17 11:12:56 2楼

    var c = document.createElement('canvas'),
    w = window.innerWidth,
    h = window.innerHeight;

    document.body.appendChild(c);
    c.style.position = 'absolute';
    c.style.zIndex = 999;
    c.style.top = 0;
    c.style.left = 0;
    c.style.width = w + 'px';
    c.width = w;
    c.style.height = h + 'px';
    c.height = h;

    c = c.getContext('2d');
    c.fillStyle = 'rgba(0,0,0,0.5)';
    c.fillRect(0, 0, w, h);
    c.clearRect(w / 2 - 50, h / 2 - 50, 100, 100);

可以考虑用canvas绘图，比如像这样，在指定的位置挖个小框。