css3 - css怎么做出這樣的效果?
問題描述
中間的那個(gè)比周圍亮的區(qū)域怎么做啊?
問題解答
回答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個(gè) p 做出它四周比較暗的區(qū)域。2、背景圖上遮罩1個(gè)p做出比較暗的地方,然后最頂上一個(gè)p里放進(jìn)同一張背景圖,定位到合適的位置。
回答5:filter: brightness(1.3);或者backgournd-color: rgba(0, 0, 0, 0.5);
這兩種方式都可以
回答6:<p>//絕對(duì)定位 <p>//背景圖 </p> <p>//相對(duì)定位 遮罩層 </p> <p>//相對(duì)定位 橫向光亮盒子 </p> <p>//相對(duì)定位 縱向盒子 </p></p>回答7:
設(shè)計(jì)師能解決的盡量不要用css來寫
回答8:醬紫的,用absolute和z-index][1]
相關(guān)文章:
1. 如何解決docker宿主機(jī)無法訪問容器中的服務(wù)?2. docker 下面創(chuàng)建的IMAGE 他們的 ID 一樣?這個(gè)是怎么回事????3. javascript - 請(qǐng)指條明路,angular的$event,在select中卻是undefined?4. 如何修改vim插件vimwiki中Vimwiki2HTML的一些細(xì)節(jié)5. javascript - JS事件委托問題6. javascript - 關(guān)于jquery的remove()方法7. JavaScript中怎么理解=、==和===8. java - Spring事務(wù)回滾問題9. javascript - vue.js如何遞歸渲染組件.10. mongodb - Mongo java驅(qū)動(dòng)中,有沒有封裝好的函數(shù),可以直接取到文檔中的某個(gè)具體的值,而不是一個(gè)文檔?或者有沒有方法實(shí)現(xiàn)??
