css怎么做出这样的效果？

Question

中间的那个比周围亮的区域怎么做啊？

Answer 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);
}

<div class="mask"></div>

Answer 2

用背景色做成的demo 如下

https://codepen.io/jackpan/pe...

用box-shadow 或者 outline做成的demo如下：
https://codepen.io/jackpan/pe...

Answer 3

正确的方法是使用 box-shadow，如： box-shadow: 0 0 0 2560px rgba(0,0,0,0.8)

Answer 4

我觉得有2种做法：
1、用4个 div 做出它四周比较暗的区域。
2、背景图上遮罩1个div做出比较暗的地方，然后最顶上一个div里放进同一张背景图，定位到合适的位置。

Answer 5

filter: brightness(1.3);
或者
backgournd-color: rgba(0, 0, 0, 0.5);

这两种方式都可以

Answer 6

<div>//绝对定位
    <div>//背景图
    </div>
    <div>//相对定位 遮罩层
    </div>
    <div>//相对定位 横向光亮盒子
    </div>
    <div>//相对定位 纵向盒子
    </div>
</div>

Answer 7

设计师能解决的尽量不要用css来写

Answer 8

酱紫的，用absolute和z-index
][1]