CSS에서 와 의 차이점

background-image는 CSS 스타일인 배경

picture

입니다.       

< img / > 예를 들어, img src의 경로를 변경하면 이미지 변경 목적을 달성할 수 있고 위치를 이동하거나

document

에서 제거할 수도 있습니다. 배경은 CSS3 스타일입니다.

img는 HTML 태그이고, 둘 사이에는 근본적인 차이점이 있습니다

배경 이미지는 큰 배경에 존재하며,

속성

설정이 다양하고 변형이 더 풍부합니다 img에 글을 쓰고 추가하고 싶은 다른 요소를 추가할 수 있습니다

일반적으로 장식용인 경우 성적인 이미지에는 background-img를 사용하고, 문체적인 내용과 밀접한 관련이 있는 경우에는 img를 사용합니다. 웹 페이지 로딩 과정에서

css 배경

으로 존재하는 이미지 배경 이미지입니다. 이미지는 구조가 로드될 때까지 기다리고(웹 페이지의 모든 콘텐츠가 표시됨) (나중에) html의 img 태그는 웹 페이지 구조(콘텐츠)의 일부이며 구조를 로드하는 프로세스 중에 로드됩니다. 즉, 웹 페이지는 먼저 img 태그의 콘텐츠를 로드한 다음 배경 이미지 background-image 를 로드합니다. 큰 이미지를 도입하면 이미지가 다운로드될 때까지 img 이후의 콘텐츠가 표시되지 않습니다. CSS를 사용하여 동일한 이미지를 도입하는 경우 웹페이지 구조와 콘텐츠가 로드될 때까지 배경 이미지가 로드되지 않으므로 웹페이지 콘텐츠 탐색에 영향을 미치지 않습니다.

그렇습니다. 전체 페이지의 배경과 같은 극단적인 경우에는 배경 이미지를 사용하는 것이 좋습니다. 하지만 로고와 같은 단일 이미지의 경우에는 로드만 하면 됩니다. 복잡한 작업을 수행해야 합니다. HTML로 구현할 수 있다면 CSS로 작성할 필요가 없다는 것입니다. 그런데 모든 이미지가 div 배경 이미지로 쓰여진 코드를 보고 문득 이게 맞는 것인지, 틀린 것인지 혼란스러워졌습니다. 누군가 나에게 장단점을 말해 줄 수 있습니까? 예를 들어 로딩에 차이가 있나요? SEO 차이? 매우 감사합니다! 간단히 말하면 img는 콘텐츠 부분이고 background-image는 장식 부분입니다.

약간의 텍스트는

img

페이지 요소 측면에서 페이지의 사진이 광고 사진, 제품 사진 등 콘텐츠로 나타나는 경우 페이지이므로 img를 사용해야 합니다. 요소 내용. 페이지 요소의 콘텐츠에 대한 가장 중요한 점은 페이지에 스타일이 없는 경우에도 한 눈에 내용을 알 수 있다는 것입니다...

Background-image

배경 이미지, 장식 콘텐츠는 페이지에 필요하지 않습니다. . 예, 페이지의 시각적 경험을 더욱 아름답게 만들기 위한 것입니다. 아니요, 사용자가 콘텐츠를 얻기 위해 웹페이지를 탐색하는 데에는 영향을 미치지 않습니다.

사실 직설적으로 말하면, 페이지를 더욱 아름답게 만들기 위해 스타일을 통해 배경 이미지를 로딩하고, 콘텐츠 이미지를 사용자에게 보여주기 위한 것입니다. 어느 날 귀하의 웹 페이지에 스타일이 없다고 가정해 보십시오. 이때 귀하의 웹 사이트에서 사용자가 볼 수 있는 사진이 무엇인지 생각해 보십시오. 이것으로 충분할 것입니다.

전경 이미지 img는 데이터 기반이며 페이지에 표시되는 콘텐츠에 속합니다.

배경 이미지는 장식용이므로 그대로 두지 마세요.

예를 들어, 사용자 이미지는 전경 이미지여야 하며, 제품 목록 이미지도 전경 이미지여야 합니다. 그런데 상품 목록의 일부 사진에는 왼쪽 상단에 추천 라벨이나 가격 인하 라벨이 붙어 있는데 이는 확실히 수정된 것입니다.

위 내용은 CSS에서 와 의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!