CSS로 PNG 이미지를 채우는 방법

debugcn 에 게시 Dev

rus131354

내부 색상으로 그림을 채워야하지만 외부는 CSS로 채워야합니다.

우리는 png를 가지고

내가하는 일

img {
  background:#8abfbe;
  width:200px;
}

<img src="https://i.stack.imgur.com/ze88p.png">

내가 필요한 것

Afif 동반

첫 번째 PNG를 사용하고 외부 만 투명하게 만든 다음 해당 이미지를 마스크로 사용하고 검은 색 선을 고려하는 배경으로 사용할 수 있습니다.

.box {
  width:150px;
  display:inline-block;
  -webkit-mask:url(https://i.ibb.co/F5n9N7c/shirt.png) center/contain no-repeat;
          mask:url(https://i.ibb.co/F5n9N7c/shirt.png) center/contain no-repeat;
  
  background:url(https://i.ibb.co/F5n9N7c/shirt.png) center/contain no-repeat;
  background-blend-mode:darken;
}
.box:before {
  content:"";
  display:block;
  padding-top:100%;
}

<div class="box" style="background-color:lightblue;"></div>
<div class="box" style="background-color:red;"></div>
<div class="box" style="background-color:lightgreen;"></div>

다음은 더 잘 이해하는 데 사용되는 이미지입니다.

img {
  background:red;
  width:150px;
}

<img src="https://i.ibb.co/F5n9N7c/shirt.png">

CSS 변수를 사용하는 최적화 된 버전 :

.box {
  width:150px;
  display:inline-block;
  
  --m:url(https://i.ibb.co/F5n9N7c/shirt.png) center/contain no-repeat;
  -webkit-mask:var(--m);
          mask:var(--m);
  
  background:var(--m) var(--c,transparent);
  background-blend-mode:darken;
}
.box:before {
  content:"";
  display:block;
  padding-top:100%;
}

<div class="box" style="--c:lightblue;"></div>
<div class="box" style="--c:red;"></div>
<div class="box" style="--c:lightgreen;"></div>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-5

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

CSS로 PNG 이미지를 채우는 방법

CSS로 PNG 이미지를 채우는 방법

8 비트 PNG 이미지를 8 비트 PNG 이미지로만 읽는 방법은 무엇입니까?

캔버스 rects를 이미지로 채우는 방법

패턴으로 이미지를 채우는 방법

cannvas 원형 호를 다른 이미지로 채우는 방법?

CSS로 표의 페이지 너비를 채우는 방법

CI 4의 ajax에 이미지 png로 qr 코드를 반환하는 방법

386 * 389 png 이미지를 20 * 20 픽셀로 조정하는 방법

Android Studio 1.5 메뉴 이미지 코드를 PNG 파일로 얻는 방법

ImageMagick으로 PNG 이미지에 투명도를 추가하는 방법

단어로 채우는 대신 두 번째 이미지를 만드는 방법

Firebase 저장소에서 가져온 이미지로 Gridview를 채우는 방법

진행률 표시 줄로 투명한 이미지를 채우는 방법은 무엇입니까? #CSS #HTML #Jquery?

이미지로 P5.js 모양을 채우는 방법

이미지 OpenCV로 다각형을 채우는 방법

이미지 OpenCV로 다각형을 채우는 방법

JQ로 숫자를 채우는 방법?

PHP에서 투명도로 PNG 이미지를 최소화하고 크기를 조정하는 방법

DirectXTex를 사용하여 dx10 dds 이미지를 png로 변환하는 방법

이미지 바이트 [] 배열을 JPEG / PNG로 압축하고 ImageSource 객체를 반환하는 방법

이미지 바이트 [] 배열을 JPEG / PNG로 압축하고 ImageSource 객체를 반환하는 방법

QR 데이터를 PNG 이미지로 인코딩하는 방법은 무엇입니까?

CSS를 사용하여 PNG 이미지의 색상을 바꾸는 방법은 무엇입니까?

PNG 이미지 파일에 Tensor를 작성하는 방법?

거대한 PNG 이미지를 여는 방법

CALayer 내에서 PNG를 불투명 한 이미지로로드하는 방법은 무엇입니까?

.xcf 파일 / 이미지를 JPEG 또는 PNG로 변환하는 방법은 무엇입니까?

SQLite에서 파일 또는 execl로 BLOB 이미지 (PNG)를 내보내는 방법은 무엇입니까?

.xcf 파일 / 이미지를 JPEG 또는 PNG로 변환하는 방법은 무엇입니까?

PNG 이미지를 투명한 GIF로 변환하는 방법은 무엇입니까?