6-4 使用者體驗 -- 透過變暗降低吸引力

  1. 這不僅僅是在APP等移動端常常見到的應用,在網頁中也常常遇到。作者在書中給出了4種解決方法,我測試了這幾種方法,當然不是每一種方法都和合適,所以推薦大家三種常用的方法

  2. 我們可以看看其最終的效果

lightbox

小測試

方法1 -- HTML添加一個深色覆蓋圖層

html

<div class="overlay">
    <div class="lightbox"> </div>
</div>

第一步:
將overlay設置成fixed,并占滿屏幕,調整期背景色為半透明深色
css

position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(0,0,0,.8);

第二步:
我們將lightbox設置成fixed布局,并設置其圖層為

z-index : 1

其次就是居中顯示了(常常用于dialog對話框)
css

.lightbox{ 
   position: fixed; 
   width: 200px;  
   height: 200px;  
   background: white;  
   left: calc(50% - 100px); 
   top: calc(50% - 100px);  
   z-index:  1;   
 
}

到此就達到了上述效果

但這種方法有缺點

  1. 增加了html結構
  2. 當我們顯示對話框時,便不能再與頁面其他組件進行交互(有時候卻是一個優點)

方法2 -- 添加一個偽元素來解決

首先我們不再需要上述復雜的html標簽,我們只需簡單的在body或者這個容器上套用類名(dimmed)
---這真的是一個比較大的不足之處,假如我們要在容器上加入其它偽元素,這個方法就力不從心了
css

body.dimmed::before{ 
   content: ''; 
   position: fixed;  
   top: 0; right: 0; bottom: 0; left: 0; 
   z-index: 1; 
   background: rgba(0,0,0,.8);
}

lightbox和方法一中一樣,我們讓其居中顯示


方法3 -- boxshadow解決方法

利用擴大box-shadow的擴散半徑,并把平移值和模糊設置為0,建立一個非常大的陰影

box-shadow: 0 0 0 999px rgba(0,0,0,.8);

但是存在一個問題,它并不支持 非常大的解析度(>2000px),所以采用了可視范圍單位vmax

1vmax 等于 1vw或1vh,取決于哪個更大選擇哪個

所以設置成:

box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);

這里有個需要注意的地方,這個方法最好使用在元素有固定定位和網頁不能滾動時使用
當然還有一個很重要的特性,box-shadow不會捕捉任何鼠標互動,所以頁面中的其他元素我們仍然可以點擊使用

總結:

當我們可以使用第二種方法時盡量使用第二種方法,
其次第一種方法可以作為備用
第三種方法當要求與頁面其他元素互動時使用比較合適

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容