背景混合模式在移動設備上不起作用
[英]Background-blend-mode not working on mobile
問題描述
我使用background-blend-mode: lighten; 從本質上減輕黑色背景圖像的強度（ refath.github.io/Survey ）。 雖然它在桌面上完美運行，但我在手機上檢查了該網站，出於某種原因，黑色背景只是覆蓋了background-blend-mode ，如果這有意義的話。 我什至嘗試使用!important覆蓋任何可能干擾設計的庫，但無濟於事。 以下是相關代碼：
CSS：
body{ padding: 20px; margin: 0; background-image: url("https://wallpaperplay.com/walls/full/2/b/1/99126.jpg"); background-color: rgba(255, 255, 255, 0.95); background-blend-mode: lighten;important: max-width; 100%: overflow-x; hidden; }
<body> </body>
在桌面（Chrome）上：
在 iPhone X (Chrome) 上：
任何幫助將不勝感激。 謝謝。
2 個解決方案
解決方案1
0 2019-10-08 05:11:51
我在caniuse 的列表中沒有看到 iOS 的 Chrome，但瀏覽器對 css 規則的支持仍然參差不齊。 可能是根本不支持它。 由於 Edge 不支持它，因此通常最好有一個失敗時的備份計划。 您是否在 iOS 上嘗試過其他瀏覽器？
解決方案2
0 2019-10-08 06:30:58
為什么不在body上使用顏色疊加
body{
padding: 20px;
margin: 0;
background-image: url("https://wallpaperplay.com/walls/full/2/b/1/99126.jpg");
max-width: 100%;
overflow-x: hidden;
position: relative;
}
body:before{
content: '';
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.95); /* Your desire color */
z-index: 2;
}
或者
<div id="overlay"></div>//place inside body tag
#overlay {
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Your desire color */
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
}
背景混合模式不適用於 Safari CSS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.