css3 - Bagaimana untuk mencipta kesan sedemikian dalam css?

Question

Bagaimana nak jadikan kawasan tengah lebih cerah dari kawasan sekeliling?

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

<p class="mask"></p>

Answer 2

Demo yang dibuat dengan warna latar belakang adalah seperti berikut

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

Demo yang dibuat dengan box-shadow 或者 outline adalah seperti berikut:
https://codepen.io/jackpan/pe...

Answer 3

Cara yang betul ialah menggunakan box-shadow，如： box-shadow: 0 0 0 2560px rgba(0,0,0,0.8)

Answer 4

Saya rasa ada dua kaedah:
1 Gunakan 4 p untuk mencipta kawasan yang lebih gelap di sekelilingnya.
2. Topeng 1 p pada imej latar belakang untuk membuat tempat yang lebih gelap, kemudian letakkan imej latar belakang yang sama ke dalam p atas dan letakkannya pada kedudukan yang sesuai.

Answer 5

penapis: kecerahan(1.3);
atau
warna backgournd: rgba(0, 0, 0, 0.5);

Kedua-dua kaedah ada

Answer 6

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

Answer 7

Setakat mana pereka boleh menyelesaikan masalah, cuba jangan gunakan css untuk menulisnya

Answer 8

Ungu, gunakan indeks mutlak dan z
][1]