部分全透明遮罩層

young.li 發(fā)布于2019-08-30 12:50 / 2665人閱讀

摘要：騰訊微云，在新用戶剛進入網(wǎng)站時的提示。第一眼看到這樣的部分全透明遮罩的效果，感覺實現(xiàn)的方式有使用圖片，在相應(yīng)的位置進行挖空全透明處理。

騰訊微云，在新用戶剛進入網(wǎng)站時的提示。
第一眼看到這樣的部分全透明遮罩的效果，感覺實現(xiàn)的方式有：

1.使用圖片，在相應(yīng)的位置進行挖空全透明處理。但是這樣如果有多處提示，就得使用多張圖片

2.或者像騰訊微云自己的實現(xiàn)方式，壘積木似的一塊一塊拼接，這樣做缺點也很明顯

在看到一篇博客上的思路，如果把白色區(qū)域看成div，黑色半透明部分看成div的各個border，這樣事情就變得簡單得多：

代碼實現(xiàn)




  
  背景遮罩
  


  這是一個背景遮罩

實現(xiàn)效果：

（這樣我們只需要改變四面border的值，就能夠改變border的位置，改變div的width 或者height就可以改變白色區(qū)域的形狀。但是這樣的缺點是只能形成有限的全透明形狀）

云服務(wù)器 GPU云服務(wù)器遮罩層遮罩層html div遮罩層 javascript遮罩層

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115098.html

相關(guān)文章

mask-image的應(yīng)用

摘要：大概的效果就是被遮罩層與遮罩層不透明的部分重疊的部分是可見的，而遮罩層是不顯示的。利用能做出一些不錯的效果，比如。想到用這個屬性正合適，于是要來了心型圖片，拿到設(shè)計師導出的文件，用壓縮下得到一個。遮罩層，如果學過Flash的同學應(yīng)該都聽過，跟PS的剪切蒙版差不多。大概的效果就是被遮罩層與遮罩層不透明的部分重疊的部分是可見的，而遮罩層是不顯示的。類似于現(xiàn)實世界中一張A4卡紙剪了個洞，我...

HollisChuang 2019-08-30 11:19 評論0 收藏0
彈出遮罩層后，如何禁止底層頁面的滾動

摘要：但是，我們會發(fā)現(xiàn)，當彈出遮罩層后，底層的內(nèi)容也是可以滾動，顯然這不是我們想要的效果，而這個問題就是小萌最近開發(fā)項目時遇到的問題。彈窗是一種常見的交互方式，而蒙層則是彈窗必不可少的元素，用于隔斷頁面與彈窗區(qū)塊，暫時阻斷頁面的交互。但是，我們會發(fā)現(xiàn)，當彈出遮罩層后，底層body的內(nèi)容也是可以滾動，顯然這不是我們想要的效果，而這個問題就是小萌最近開發(fā)項目時遇到的問題。一個小程序的項目，是用MPV...

betacat 2019-04-23 13:24 評論0 收藏0
css揭秘筆記——用戶體驗

摘要：使用透明邊框增大熱區(qū)面積，但和并不能阻止背景擴大到邊框下面模擬原有邊框自定義復選框思路使用與復選框綁定的的偽元素模擬一個勾選框，可以自定義其樣式，將原來的復選框隱藏。這種方式被稱為復選框。選用合適的鼠標光標 css3提供了一大批內(nèi)建光標(cursor)其中某些光標很突出，因為只需要花費極少的代碼，就可以迅速地提升大量網(wǎng)頁應(yīng)用的可用性。比如禁用（not-allowed），比如，公共觸摸...

huaixiaoz 2019-08-29 13:49 評論0 收藏0
簡單實現(xiàn)彈出彈框頁面背景半透明灰，彈框內(nèi)容可滾動原頁面內(nèi)容不可滾動的效果(JQuery)

摘要：當彈框彈出時原頁面內(nèi)容不能滾動，即將樣式設(shè)為原頁面的內(nèi)容就不會動了當彈框關(guān)閉后再將樣式改為默認的中的寫一個函數(shù)，再在彈框的中調(diào)用函數(shù)。彈出彈框效果展示實現(xiàn)原理 html結(jié)構(gòu)比較簡單，即：遮罩層彈框先寫覆蓋顯示窗口的遮罩層div.box，因為要在整個窗口顯示固定，所以position要設(shè)為fixed，background設(shè)為灰色半透明，由于要遮住整個顯示屏，...

番茄西紅柿 2019-04-23 11:51 評論0 收藏0
前端入門小結(jié)

摘要：實現(xiàn)了搜索這一功能，接下來就是要把這一部分嵌入到一個平臺，因此我開始接觸編程以及前端。之前我對前端幾乎沒有什么了解，因此這一周除了體檢被檢查出來早搏參加入學典禮之外，就是在琢磨，，了，并結(jié)合需求開發(fā)了網(wǎng)站的一部分。今年暑假大部分時間是在要學校，前一階段一直在學習Scala和理解Spark，但是苦于沒有實際上手的項目，盡管看了不少論文和書，但不敢說自己理解的有多深刻，所以我打算暫時擱置...

chengtao1633 2019-08-21 10:41 評論0 收藏0