【CSS】css3 可以实现背景虚化但是一块不虚化的效果么
大概就是这个效果 其余的区域只是opacity不是100%而已 但是有一块是原样
这个不是在图片上 而是页面上处理
这个东西的用途就是在页面上做一个新功能提示 比如网页上多出一个新功能 为了让用户注意到 可能在页面加载进来的时候 我用一个黑色带透明的遮罩层把其余的位置全盖住 但是只把我要强调的地方露出来
一个实现方式我想到的是把那个地方做成图片扔到遮罩层上面 但是不可能每次都做图片啊
回答:
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绘图,比如像这样,在指定的位置挖个小框。
回答:
div{
width:100px;
height:100px;
border:500px solid rgba(255,255,255,0.5);;
background-color:transparent;
}
OK吗?
以上是 【CSS】css3 可以实现背景虚化但是一块不虚化的效果么 的全部内容, 来源链接: utcz.com/a/154763.html