CSS를 사용하여 두 개의 화살표 이미지(공감/비추천)를 서로 겹쳐서 저장하는 방법은 무엇입니까?

웹사이트의 레이아웃은 중요한 구성요소입니다. 사용자 참여를 촉진함으로써 웹 사이트의 시각적 표준과 전반적인 품질을 향상시킵니다. 웹사이트 개발에 CSS가 꼭 필요한 것은 아니지만, 단조롭고 지루한 웹사이트와 상호작용하고 싶어하는 사용자는 없기 때문에 스타일 지정은 중요합니다.

웹사이트를 구축할 때 사진은 예쁘게 보이는 것 외에는 아무런 목적도 없는 '있으면 좋은' 기능이라고 생각할 수도 있습니다. 하지만 웹사이트의 그래픽에는 단순히 귀여운 그림을 만드는 것보다 더 많은 것이 있습니다.

이미지는 웹 페이지에 아름다운 모습을 제공합니다. SEO를 위해 사진을 사용하면 많은 이점이 있습니다. CSS를 사용하면 이러한 이미지의 스타일을 지정하고 위치를 지정하여 환상적인 시각 효과를 만들 수 있습니다. 이 기사에서는 CSS를 사용하여 화살표 이미지(장단점)를 서로 오버레이하는 방법에 대해 설명합니다.

먼저 HTML 페이지에 화살표 이미지를 추가하는 방법을 살펴보겠습니다.

화살표 이미지 추가

화살표 이미지를 추가하려면 태그를 사용합니다.

예

으아악

위의 예에서는 upvote 및 downvote라는 두 개의 화살표 이미지를 보여줍니다.

예

아래 예에는 두 개의 화살표 이미지(찬성/비추천)가 서로 겹쳐져 있습니다

으아악

사용된 속성

이 예에서는 CSS를 사용하여 이미지의 높이와 너비를 지정합니다. 이러한 이미지를 함께 쌓기 위해 다음 CSS 속성을 사용했습니다. -

디스플레이 속성

이 CSS 속성을 통해 개발자는 요소의 표시 동작 유형을 결정할 수 있습니다. 간단히 말해서 요소의 컨테이너 유형을 결정할 수 있습니다.

문법

으아악

예

으아악

플로팅 속성

이 CSS 속성을 통해 개발자는 요소가 어느 면에 떠있을지 지정할 수 있습니다. 위치: 절대 요소는 부동 속성을 무시합니다. 값은 left, right 또는 none일 수 있습니다.

문법

으아악

예

으아악

속성 지우기

플로팅된 요소 옆의 요소는 주변의 흐름을 따릅니다. 이 문제를 해결하기 위해 CSS에는 clear 속성이 있습니다. 해당 값은 없음, 왼쪽, 오른쪽, 둘 다, 초기 및 상속일 수 있습니다.

문법

으아악

결론

이 글에서는 HTML 문서에서 화살표(찬성 및 반대) 이미지를 표시하는 방법을 배웠습니다. 또한 CSS display, float 및 clear 속성을 사용하여 함께 스택하는 방법에 대해서도 논의했습니다.

위 내용은 CSS를 사용하여 두 개의 화살표 이미지(공감/비추천)를 서로 겹쳐서 저장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!