css3 可以實(shí)現(xiàn)背景虛化但是一塊不虛化的效果么
問題描述
大概就是這個(gè)效果 其余的區(qū)域只是opacity不是100%而已 但是有一塊是原樣
這個(gè)不是在圖片上 而是頁(yè)面上處理
這個(gè)東西的用途就是在頁(yè)面上做一個(gè)新功能提示 比如網(wǎng)頁(yè)上多出一個(gè)新功能 為了讓用戶注意到 可能在頁(yè)面加載進(jìn)來的時(shí)候 我用一個(gè)黑色帶透明的遮罩層把其余的位置全蓋住 但是只把我要強(qiáng)調(diào)的地方露出來
一個(gè)實(shí)現(xiàn)方式我想到的是把那個(gè)地方做成圖片扔到遮罩層上面 但是不可能每次都做圖片啊
問題解答
回答1: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繪圖,比如像這樣,在指定的位置挖個(gè)小框。
回答2:p{width:100px;height:100px;border:500px solid rgba(255,255,255,0.5);;background-color:transparent;}
OK嗎?
相關(guān)文章:
1. html - vue項(xiàng)目中用到了elementUI問題2. mysql scripts提示 /usr/bin/perl: bad interpreter3. showpassword里的this 是什么意思?代表哪個(gè)元素4. css3 - border-bottom 的長(zhǎng)度可否超過盒子的寬度呢?實(shí)現(xiàn)如下圖效果。(我的書下面的線)5. android - 用textview顯示html時(shí)如何寫imagegetter獲取網(wǎng)絡(luò)圖片6. 對(duì)mysql某個(gè)字段監(jiān)控的功能7. css3 - css怎么實(shí)現(xiàn)圖片環(huán)繞的效果8. javascript - 原生canvas中如何獲取到觸摸事件的canvas內(nèi)坐標(biāo)?9. JavaScript事件10. mysql優(yōu)化 - mysql EXPLAIN之后怎么看結(jié)果進(jìn)行優(yōu)化 ?
