Мое требование - добавить маску поверх элемента div со всей областью, чтобы обеспечить прозрачность 50%, за исключением небольшого окна в этом элементе div, которое должно быть непрозрачным на 100%.

- на 100% непрозрачный, я имел в виду, контент должен быть полностью видимым без какой-либо маски в этой области.

Я также прилагаю изображение, упоминающее, чего я пытаюсь достичь.

Я попробовал ниже упомянутую маску, но это не сработало:

-webkit-mask-composite: source-over;
-webkit-mask-image:
    -webkit-linear-gradient(

        left,
        rgba(0,0,0,1) 0 ,
        rgba(0,0,0,1) 100px ,
        rgba(0,0,0,0.5) 100px , 
        rgba(0,0,0,0.5) 300px 

    ),
    -webkit-linear-gradient(

        top,
        rgba(0,0,0,0.5) 0 ,
        rgba(0,0,0,0.5) 50px,
        rgba(0,0,0,1) 50px,
        rgba(0,0,0,1) 100px,
        rgba(0,0,0,0.5) 100px,
        rgba(0,0,0,0.5) 150px 
    )
;"