0
206
ViewsCuadro borroso con centro transparente con css en react js
Tengo un diseño como este:
y tengo un código como este:
<div data-testid="container" class="reactEasyCrop_Container img-crop-container"> <img alt="" class="reactEasyCrop_Image reactEasyCrop_Contain img-crop-media" src="" /> <div data-testid="cropper" class="reactEasyCrop_CropArea reactEasyCrop_CropAreaRound" style="width: 371.594px; height: 371.594px;"> </div> </div>Ahora, ¿cómo puedo tener este cuadro de desenfoque que es transparente en el centro con este código y CSS? Tenga en cuenta que solo puedo usar CSS y no puedo cambiar el código HTML
·
Juan Pablo Isaza
1 answers
Answer question0
Sin cambiar la estructura html, puede usar radial-gradient para hacerlo
.reactEasyCrop_CropAreaRound { display: none; } .img-crop-container { position: relative; width: 200px; } .img-crop-container::after { content: ""; width: 100%; height: 100%; background: #FFFFFF70; position: absolute; background: radial-gradient(circle at center, transparent 50%, #ffffffa0 50%); filter: drop-shadow(0px 0px 6px #ffffffa0); top: 0; left: 0; } <div data-testid="container" class="reactEasyCrop_Container img-crop-container"> <img alt="" class="reactEasyCrop_Image reactEasyCrop_Contain img-crop-media" src="https://picsum.photos/200" /> <div data-testid="cropper" class="reactEasyCrop_CropArea reactEasyCrop_CropAreaRound" style="width: 371.594px; height: 371.594px;"> </div> </div>
·
Juan Pablo Isaza
Report
Answer question