CSS 콘텐츠 속성을 사용하여 Div에 이미지를 포함하는 방법은 무엇입니까?

CSS를 사용하여 Div에 이미지 통합

많은 사용자는 div가 적응하도록 하면서 CSS 스타일 div 내에 이미지를 표시하는 솔루션을 찾고 있습니다. 이미지의 크기. 이 문서에서는 이 문제를 다루고 HTML 요소

의 기능을 복제하는 효율적인 방법을 제공합니다.

제안된 기술은 CSS 내의 콘텐츠 속성을 활용하여 원하는 이미지를 div에 삽입하는 것입니다. 수행 방법은 다음과 같습니다.

1. 지정된 클래스를 사용하여 div 요소를 만듭니다. 예를 들면 다음과 같습니다.

   <code class="html"><div class="image"></div></code>

2. CSS 내에서 다음을 적용합니다. 클래스에 다음 스타일을 적용합니다.

   <code class="css">div.image::before {
   content:url(http://placehold.it/350x150);
   }</code>

이 예에서 http://placehold.it/350x150은 이미지의 URL을 나타냅니다.

이 접근 방식은 이미지를 기준으로 크기를 조정하는 div의 기능을 유지하면서 이미지를 div에 추가합니다. 라이브 데모를 보려면 다음 링크를 방문하세요: http://jsfiddle.net/XAh2d/.

자세한 내용은 http://css-tricks.com/css-content/를 참조하세요. CSS 콘텐츠에 대한 종합 가이드.

호환성:

이 기술은 Chrome, Firefox 및 Safari(MacOS)에서 성공적으로 테스트되었습니다. Internet Explorer 사용 경험이 있으시면 공유해 주세요.

위 내용은 CSS 콘텐츠 속성을 사용하여 Div에 이미지를 포함하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!