CSS 마스킹 (Webkit) -이 서클을 어떻게 코드합니까?

Question

우선, 저는 웹 디자인과이 웹 사이트에 대해 매우 새로운 것입니다.

나는이 질문을 채팅에 올렸지 만 평판이 충분하지 않아 기존의 대답 된 질문에 답장 할 수 없다고 생각하므로 여기에이 질문을 게시하면 괜찮을 것입니다. :

제 질문은 "webkit-mask-image"에 관한 것이고 여기의 주제는 flexslider border-radius does not wrap image in Chrome, Safari, but will in Firefox입니다.

질문이 코드로 대답했다 : "-webkit-마스크 이미지 : 홈페이지 (데이터 : 이미지/PNG, Base64로, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA + oJAAAAAElFTkSuQmCC"

난 그냥 시도하고이 주위에 내 머리를 싶지

아직 배우고 있지만 누가 나를 위해이 코드를 정의 할 수 있습니까? SVG 형식입니까?

정확히 연결되는 URL은 무엇입니까? 또는 데이터 이미지, png를 "소환"하는 방법입니다. SVG 형식의 코드를 사용하여 -64 (최대 24 개 (!)가되었다고 생각했습니다)

요약하면 위의 코드에 대해 묻습니다.

1) URL : URL의 목적과 외부 소스에 연결되어 있는지 여부.

2) data : image/png; base64 : 어떤 변형이있을 수 있습니까?

3) + iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA oJAAAAAElFTkSuQmCC : 작가 같은 벡터 계 프로그램 SVG 유래?

시간을 내 주셔서 감사합니다. 구현하기 전에 상황을 이해하고 싶습니다.

Answer 1

1. 일반적으로 url은 배경 이미지 정의 컨텍스트에서 사용됩니다. 지정된 URI에서 지정된 이미지를로드하도록 지시합니다. 자세한 내용은 here을 참조하십시오. 예 :

   background-image : url ("images/darkpattern.png");

2. 이미지/png는 소위 MIME-TYPE이며 설명하는 콘텐츠 유형 (텍스트, 동영상, 오디오, 이미지 등)을 정의합니다. 기본적으로 모든 유형의 미디어를 삽입 할 수 있습니다. Base64는 사용되는 charset이며이 경우 ASCII 형식으로 이진 데이터를 표시하는 체계입니다.

3. 여기서 수행 된 작업은 웹 서버의 어딘가에 저장된 png 이미지를로드하는 대신 CSS의 오른쪽에이 이미지의 내용을 포함시키는 것입니다. 이 png 파일을 메모장과 함께 열면 인코딩과 관련된 별난 기호가 많이 보입니다. base64로 인 코드 된 문자열은 위의 문자열 ("iVBORw0KGgoAAAA ...")과 동일해야합니다. 이 기법을 사용하면 요청을 저장하지만 동시에 이미지를 캐시 할 수있는 능력을 잃을 수도 있다는 것을 고려해야합니다. 이는 모든 요청이 이미지를 한 번 더로드한다는 것을 의미하므로 작은 그림에만 권장됩니다. 개인적으로 나는이 기술을 전체적으로 좋아하지 않습니다.