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. atom编译器 如何格式化前端代码文件?2. javascript - webpack热加载配置不生效3. css3 - 我的css用less写的,eclipse的jsp文件要修改css很麻烦,怎么解决?4. android - 新建项目卡在Gradle:Resolvedependencies’:app:_debugCompile’5. angular.js - ng-repeat的数据排序,我用了orderBy: d.supportNum为什么失效?6. python - Pycharm调试代码进行列表遍历时,如何直接赋值指定元素7. javascript - 关于在angularjs的select中遇到的问题!!8. android - NavigationView 的侧滑菜单中如何保存新增项(通过程序添加)9. android - 使用listview加载不同item,数据填充错误。10. python - 基于scrapy-redis的分布式爬虫运行的时候不能正常运行 遇到的问题如下截图所示