인라인 이미지로 고정 된 배경 효과 검색

최근 클라이언트 프로젝트를 수행하는 동안 이미지에 대한 특정 시각적 효과가 필요했습니다. background-attachment: fixed; ,이 고정 스크롤 효과를 쉽게 달성 할 수 있습니다. 페이지는 페이지가 스크롤하더라도 정지 상태로 유지됩니다. 이 효과는 자주 사용되지는 않지만 특히 미묘하게 적용될 때 상당히 인상적 일 수 있습니다.

목차

• 왜 사용하십시오<img alt="인라인 이미지로 고정 된 배경 효과 검색" > background-image 대신?
• CSS background-image 사용
• 인라인 이미지에 대한 clip-path 트릭
• 더 나은 접근?

처음에는 인라인 이미지를 사용 하여이 고정 효과를 복제하는 것을 목표로했습니다.<img alt="인라인 이미지로 고정 된 배경 효과 검색" > ) CSS 배경 이미지 대신. 원하는 효과에 대한 데모는 여기에 있습니다. 이 데모의 코드는이 git 저장소 에 있습니다 (참고 : 이것은 Next.js 프로젝트입니다). RAW HTML이있는 단순화 된 코드 펜 예제가 이어집니다.

왜 사용하십시오<img alt="인라인 이미지로 고정 된 배경 효과 검색" > background-image 대신?

몇 가지 이유가 내 선호도에 동기를 부여했습니다<img alt="인라인 이미지로 고정 된 배경 효과 검색" > 꼬리표:

• 더 쉬운 게으른 하중.
• alt 텍스트를 통한 SEO 및 접근성 향상.
• srcset / sizes 사용하여 최적화 된 로딩 성능.
• 브라우저에서 최적화 된 이미지 선택을 통해<picture></picture> 꼬리표.
• 사용자를위한 직접 이미지 저장 (DevTools없는).

사용<img alt="인라인 이미지로 고정 된 배경 효과 검색" > 이미지가 단순한 장식보다는 내용으로 간주 될 때 일반적으로 태그가 바람직합니다. 내 솔루션에는 clip-path CSS 속성이 포함되었습니다. 이것을 background-image 방법과 비교해 봅시다.

1. CSS background-image 사용

전통적인 접근법은 background-image 사용합니다.

 .hero- 섹션 {
  백그라운드 이미지 : URL ( "nice_bg_image.jpg");
  배경 반복 : 비 반복;
  배경 크기 : 덮개;
  배경 위치 : 센터;
  배경 상착 : 고정;
}

그러나이 방법에는 한계가 있습니다. 이미지는 컨텐츠로 취급되지 않아 접근성에 영향을 미칩니다 (스크린 리더). 또한 이미지가 뷰포트 내에서 채워 지거나 중앙에있을 때만 최적으로 작동합니다. 중앙 이미지는 다른 장치에서 적절한 위치를위한 미디어 쿼리가 필요합니다.

2. 인라인 이미지에서 clip-path 트릭 사용

clip-path 사용하는 스택 오버 플로우 솔루션은 대안을 제공합니다.

 .Image-container {
  위치 : 상대;
  높이 : 200px;
  클립 경로 : 삽입 (0);
}

.Image {
  객체 적합 : 덮개;
  위치 : 고정;
  왼쪽 : 0;
  상단 : 0;
  너비 : 100%;
  높이 : 100%;
}

이 접근법은<img alt="인라인 이미지로 고정 된 배경 효과 검색" > 태그의 장점. 그러나 간결하지 않으며 clip-path 도전을 제시합니다. 예를 들어, border-radius 와 같은 간단한 스타일은 clip-path 자체를 수정해야합니다. clip-path 내에서 정확한 이미지 위치는 복잡 할 수 있습니다.

더 나은 접근?

궁극적으로 CSS background-image 사용하여 한계를 인정했습니다. 인라인 이미지를 사용 하여이 고정 스크롤 효과를 성공적으로 구현 한 사람이 더 우아한 방식으로 있습니까? 당신의 솔루션을 듣는 것에 감사드립니다!

위 내용은 인라인 이미지로 고정 된 배경 효과 검색의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!