테스트 사이트 - 개발 중인 베타 버전입니다

이미지 CSS 가운데는 밝고 가장자리는 어둡게 채택완료

강력드라이브 1년 전 조회 8,970

이미지에 CSS 로 가운데만 밝고 가장자리를 어둡게 할 수 있을까요?

 

brightness 로 밝기 조절은 되는데 가운데 부분만 밝게 하는 필터가 있을까요??

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
1년 전

</p>

<p><style>

.focused {

    display: inline-block;

    position: relative;

}

.focused::after {

    content: '';

    position: absolute;

    inset: 0;

    background-color: #000;

    mask-image: radial-gradient(transparent, #000);

}

</style></p>

<p> </p>

<p><span class="focused">

    <img src="<a href="https://www.gov.br/transportes/pt-br/servicos/gestao-de-pessoas/noticias-cogep/arquivos/500x500.png/@@images/image.png">" target="_blank" rel="noopener noreferrer">https://www.gov.br/transportes/pt-br/servicos/gestao-de-pessoas/noticias-cogep/arquivos/500x500.png/@@images/image.png"></a>

</span></p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

</p>

<p>    <style></p>

<p>.my_img2 {    </p>

<p>    filter: brightness(160%);</p>

<p>    position: absolute;</p>

<p>    /* clip: rect( 50px, 200px, 200px, 50px); */</p>

<p>    clip-path: circle(30%);</p>

<p>}</p>

<p> </p>

<p>.my_imgaaa{</p>

<p>    background-image : url( "./puppy.png"  );</p>

<p>}</p>

<p>    </style></p>

<p>

 

 

</p>

<p>        <div  class="my_imgaaa"  style=" width:500px ; height:500px " >        </p>

<p>            <img src="./puppy.png" class="my_img2"  >    </p>

<p>        </div>  </p>

<p>

 

 

급조해 봤는데요.

이미지 두게를 겹치게 하고 한 개를 원형으로 잘라서 밝기를 주는 방법

어떨까 싶네요.

 

 

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인