Home IT/WEB vuetify v-img 컴포넌트 내에 오버레이 적용방법

vuetify v-img 컴포넌트 내에 오버레이 적용방법

v-img 컴포넌트 위에 텍스트를 올리는 일반적인 방법 중 하나는 Vuetify의 v-img 컴포넌트에서 제공하는 slot을 사용하는 것입니다. v-img 컴포넌트는 이미지 로딩을 처리하는 동안 사용자 정의 컨텐츠를 표시할 수 있는 여러 slot을 제공합니다. 이 중 default slot을 사용하면 이미지 위에 텍스트나 다른 Vue 컴포넌트를 배치할 수 있습니다.

v-img의 Default Slot 사용방법

inline ad

v-img의 default slot은 이미지 위에 HTML 또는 Vue 컴포넌트를 배치할 때 사용할 수 있습니다. 이를 활용해 이미지 위에 텍스트를 올릴 수 있습니다.

이 예제에서는 v-row와 v-col 컴포넌트를 사용하여 이미지 중앙에 텍스트를 정렬하고 있습니다. fill-height 클래스를 사용하면 v-row가 v-img의 전체 높이를 채우게 되어, 이미지 위 전체 영역에 걸쳐 텍스트나 다른 컨텐츠를 배치할 수 있습니다.

<v-img
  src="your-image-url.jpg"
  aspect-ratio="1.7"
>
  <template v-slot:default>
    <v-row
      class="fill-height"
      align="center"
      justify="center"
    >
      <v-col class="text-center">
        <span class="display-2 text-overlay">여기에 텍스트</span>
      </v-col>
    </v-row>
  </template>
</v-img>

v-img에 오버레이 적용하기

<v-img
  :src="getThumbnailUrl(video)"
  aspect-ratio="1.78"
  cover
  @click="handleImageClick(video, index)"
>
  <template v-slot:default>
    <div class="d-flex align-center justify-center fill-height overlay-style">
       <!-- 오버레이 추가 내용 -->
      <div class="overlay-text">
        여기에 오버레이 텍스트나 추가 정보
      </div>
    </div>
  </template>
</v-img>
.overlay-style {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 오버레이 배경 */
  position: absolute;
  top: 0;
  left: 0;
}

.overlay-text {
  color: white; /* 텍스트 색상 */
  font-size: 18px; /* 텍스트 크기 */
  padding: 10px; /* 텍스트 주변 여백 */
}

관련문서

vuetify v-img api: https://vuetifyjs.com/en/api/v-img/

RECENT POSTS

[css]autoprefixer: end value has mixed support, consider using flex-end instead warning 처리 및 다양한 에러 메시지 의미

이 경고 메시지는 CSS를 처리하는 도구인 Autoprefixer가 justify-content: end; 속성값을 처리하려 할 때 발생합니다. Autoprefixer는 CSS에 벤더 접두사를 자동으로 추가해 주는 도구로, 다양한 브라우저에서 CSS 속성이...

[javascript]Math.min, Math.max 사용방법

Math.min과 Math.max는 JavaScript의 Math 객체에서 제공하는 메서드로, 각각 주어진 숫자들 중 최소값과 최대값을 반환합니다. 이 메서드들은 다양한 수학 연산과 데이터 처리에서 유용하게 사용될 수...

널 병합 연산자 Nullish coalescing operator (??) 에 대해서 알아보자.

널 병합 연산자 Nullish coalescing operator (??)는 JavaScript에서 null이나 undefined 값을 체크하는 데 사용되는 연산자입니다. 이 연산자는 좌변의 피연산자가 null 또는 undefined일 경우 우변의 피연산자를 반환하고, 그렇지 않은 경우 좌변의...

[css]부모 요소의 border-radius가 자식 요소의 background-color로 가려지지 않도록 설정할 수 있는 방법

overflow: hidden 속성 사용 부모 요소의 border-radius를 자식 요소의 background-color로 가려지지 않도록 설정해야 합니다. 이를 위해 부모 요소에 overflow: hidden; 속성을 추가하여 자식 요소의 배경이...