css3 - Comment créer un tel effet en CSS?

Question

Comment rendre la zone du milieu plus lumineuse que la zone environnante ?

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

La démo réalisée avec la couleur de fond est la suivante

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

La démo réalisée avec box-shadow 或者 outline est la suivante :
https://codepen.io/jackpan/pe...

Answer 3

La bonne façon est d'utiliser box-shadow，如： box-shadow: 0 0 0 2560px rgba(0,0,0,0.8)

Answer 4

Je pense qu'il existe deux méthodes :
1. Utilisez 4 p pour créer une zone plus sombre autour.
2. Masquez 1 p sur l'image d'arrière-plan pour créer un endroit plus sombre, puis placez la même image d'arrière-plan dans le p supérieur et positionnez-la à la position appropriée.

Answer 5

filtre : luminosité(1.3);
ou
backgournd-color : rgba(0, 0, 0, 0.5);

Les deux méthodes sont disponibles

Answer 6

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

Answer 7

Autant que les concepteurs peuvent résoudre le problème, essayez de ne pas utiliser de CSS pour l'écrire

Answer 8

Violet, utilisez absolu et z-index
][1]