css3 - css怎么做出這樣的效果?
問題描述
中間的那個比周圍亮的區域怎么做啊?
問題解答
回答1:.mask { position: fixed; z-index: 10000; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 300px; height: 100px; outline: 1000px solid rgba(0, 0, 0, 0.5);}<p class='mask'></p>回答2:
用背景色做成的demo 如下
https://codepen.io/jackpan/pe...
用box-shadow 或者 outline做成的demo如下:https://codepen.io/jackpan/pe...
回答3:正確的方法是使用 box-shadow,如: box-shadow: 0 0 0 2560px rgba(0,0,0,0.8)
回答4:我覺得有2種做法:1、用4個 p 做出它四周比較暗的區域。2、背景圖上遮罩1個p做出比較暗的地方,然后最頂上一個p里放進同一張背景圖,定位到合適的位置。
回答5:filter: brightness(1.3);或者backgournd-color: rgba(0, 0, 0, 0.5);
這兩種方式都可以
回答6:<p>//絕對定位 <p>//背景圖 </p> <p>//相對定位 遮罩層 </p> <p>//相對定位 橫向光亮盒子 </p> <p>//相對定位 縱向盒子 </p></p>回答7:
設計師能解決的盡量不要用css來寫
回答8:醬紫的,用absolute和z-index][1]
相關文章:
1. html5 - ElementUI table中el-table-column怎么設置百分比顯示。2. python - 使用readlines()方法讀取文件內容后,再用for循環遍歷文件與變量匹配時出現疑難?3. 對mysql某個字段監控的功能4. css3 - less或者scss 顏色計算的知識應該怎么學?或者在哪里學?5. 注冊賬戶文字不能左右分離6. javascript - table列過多,有什么插件可以提供列排序和選擇顯示列的功能7. css - 網頁div區塊 像蘋果一樣可左右滑動 手機與電腦8. javascript - 數組的過濾和渲染9. html - vue項目中用到了elementUI問題10. JavaScript事件
