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繪圖，比如像這樣，在指定的位置挖個小框。

p{width:100px;height:100px;border:500px solid rgba(255,255,255,0.5);；background-color:transparent;}

OK嗎？