WordPress에서 이미지를 오버레이하는 방법

게시 됨: 2021-07-15

웹 사이트를 탁월하게 만드는 데 열성적이라면 항상 아름답게 만들기 위해 노력할 것입니다. 귀하의 사이트를 뮤즈로 만드는 수백만 가지 방법이 있으며 그 중 하나가 오늘 게시물에서 언급될 것입니다: 이미지 오버레이 .

목차 숨기기

1. 오버레이란 무엇입니까?
2. WordPress에서 이미지를 오버레이하는 방법
1. 2.1. 방법 1: Gutenberg의 Cover Block 사용
2. 2.2. 방법 2: CSS 사용
3. 평결

아직도 그것이 무엇인지 궁금하십니까? 천천히, 그리고 우리가 당신을 데리고 나가자!

오버레이란 무엇입니까?

보시다시피, 텍스트와 오버레이가 있는 이미지를 제목으로 사용했습니다. 그것은 단순한 텍스트 제목을 작성하는 것과 큰 차이를 만들었습니다. 평소보다 훨씬 세련되고 매력적이죠?

더 중요한 것은 이미지의 오버레이가 배경 그림이 보이도록 유지하면서 텍스트를 강조 표시하는 데 도움이 된다는 것입니다. 이와 같은 게시물/페이지에 텍스트와 오버레이가 포함된 이미지를 쉽게 추가하고 다양한 용도로 사용할 수 있습니다. 이 게시물에서는 간단한 단계로 수행하는 방법을 보여줍니다.

아직 흥분? 시작하자!

WordPress에서 이미지를 오버레이하는 방법

WordPress에서 이미지를 오버레이할 수 있는 두 가지 방법이 있습니다. Gutenberg의 커버 블록을 사용하는 방법과 CSS를 사용하는 방법입니다. Gutenberg를 사용하면 빈 시트에서도 오버레이가 있는 이미지가 포함된 게시물/페이지를 만드는 데 도움이 되지만 CSS를 사용하면 미리 만들어진 게시물/페이지에서 이미지를 빠르게 사용자 지정할 수 있습니다.

이 두 가지 방법 모두 어떤 면에서는 사용하기 쉬운데, 하나씩 사용법을 알려드리겠습니다.

방법 1: Gutenberg의 Cover Block 사용

Gutenberg의 페이지 편집기로 이동합니다.

1단계: Cover Block을 사용하여 이미지를 삽입합니다.

블록 추가를 클릭하고 블록 유형을 Cover 로 선택합니다.

그런 다음 해당 표지 블록에 표시할 배경 그림을 선택합니다. 이미지를 업로드하거나 라이브러리에서 이미지를 선택할 수 있습니다.

필요한 경우 이전에 추가한 이미지를 표지 이미지로 변경할 수도 있습니다. 이미지를 클릭하고 블록 스타일 또는 유형 변경 을 선택한 다음 표지를 선택합니다.

제 경우에는 이 비니를 배경으로 선택하고 그 위에 임의의 텍스트도 씁니다.

또한 아래 설정에서 내 이미지의 너비를 설정할 수 있습니다. 그냥 중앙에 맞추겠습니다.

이제 내 표지 블록이 배경 그림과 텍스트로 준비되었습니다. 기본적으로 Cover 블록에는 이미 검은색 오버레이가 있으므로 다음 부분에서 편집하는 방법을 살펴보겠습니다.

2단계: 덮개 블록 오버레이 사용자 지정

다음으로 블록 설정을 진행하여 오버레이를 만듭니다.

블록을 클릭하고 > 옵션 버튼 (점 3개로 표시되는 버튼으로 표시)을 클릭하고 > 더 많은 설정 표시를 선택합니다.

이제 화면 오른쪽에 차단 설정 메뉴가 준비되어야 합니다. 오버레이 섹션으로 이동합니다.

표지 이미지를 오버레이하기 위해 단색 및 그라디언트의 두 가지 색상 옵션을 제공합니다.

우리는 이 두 가지 옵션을 모두 시도할 것입니다. 먼저 단색 오버레이를 사용해 보겠습니다.

단색 오버레이

이제 다음을 수행할 수 있습니다.

제안된 메뉴에서 색상을 선택하십시오.
사용자 정의 색상을 선택하십시오. 팔레트에서 색상을 선택하거나 색상 코드를 삽입할 수 있습니다. 사용자 정의 색상은 아래와 같이 표시됩니다.

오버레이를 위해 달콤한 핑크 색상을 선택했습니다. 게다가 오버레이의 불투명도(투명도 수준)를 변경할 수도 있습니다.

불투명도는 30~60%가 적절한 값입니다. 불투명도를 제안된 비율보다 낮거나 높게 설정하면 오버레이가 거의 보이지 않거나 너무 굵게 표시되어 배경이 보이지 않을 수 있습니다. 불투명도를 기본값으로 50%로 유지하겠습니다.

여기에서 모든 설정이 완료되었습니다! 이것이 바로 표지 이미지에 단색 오버레이를 추가하는 방법입니다.

이제 그라디언트 색상 옵션으로 이동하겠습니다.

그라디언트 색상 오버레이

위에서 언급한 것처럼 그라디언트 색상은 선택한 두 가지 이상의 색상 구성표입니다. 또는 간단히 말해서 오버레이의 색상은 첫 번째에서 두 번째로 선택한 색상(등)으로 각각 점진적으로 변경됩니다.

더 잘 이해하기 위해 그라디언트 오버레이를 만드는 방법을 살펴보겠습니다.

먼저 색상 모드를 단색에서 그라데이션으로 변경했습니다. 또한 제안 메뉴에서 그라데이션 색상 세트를 선택했습니다. 다음과 같이 보입니다.

보시다시피 오버레이는 3개의 제어점으로 구성됩니다. 각각은 단색을 가지고 있으며 이러한 제어점을 이동하여 오버레이의 색 구성표를 조정할 수 있습니다.

그라디언트 색상을 선택할 때 기본 색상 배열은 균형을 이룹니다. 나는 그것을 조금 조정하려고 노력할 것이고 이것이 어떻게 바뀌는가?

또 다른 조정은 색 구성표 유형입니다. 선형 및 방사형 유형 중에서 선택할 수 있습니다. 선형 유형을 사용하면 오버레이 방향도 선택할 수 있습니다.

그 그라디언트 색상 옵션을 마스터하려면 더 나은 예술적 감각이 필요하고 오버레이에 가장 적합한 조합을 만들기 위해 색상을 혼합하고 일치시키는 방법도 배워야 합니다.

방법 2: CSS 사용

Classic Editor를 사용하여 이미지에 오버레이를 추가하려면 CSS를 사용해야 합니다. CSS를 추가해야 합니다. 모양 > 사용자 정의 > 추가 CSS 로 이동합니다.

그래디언트 오버레이의 경우

그래디언트 오버레이를 위해 다음 코드를 추가합니다.

 .background-gradient {
    위치: 상대;
}
.background-gradient::before {
    콘텐츠: '';
    배경: 선형 그라데이션(135deg,#0693e3,#9b51e0);
    위치: 절대;
    상단: 0;
    왼쪽: 0;
    하단: 0;
    오른쪽: 0;
    z-인덱스: 1;
    불투명도: .5;
}

솔리드 오버레이의 경우:

솔리드 오버레이에 대해 다음 코드를 추가합니다.

 .배경 불투명도 {
    위치: 상대;
}
.background-opacity:전 {
    콘텐츠: '';
    위치: 절대;
    상단: 0;
    왼쪽: 0;
    하단: 0;
    오른쪽: 0;
    z-인덱스: 1;
    불투명도: .5;
    배경색: #000;
}

참고: 이 코드는 이미지의 텍스트가 아닌 오버레이만 추가하는 데 도움이 됩니다.

다른 종류의 오버레이로 많은 이미지를 추가하려는 경우 둘 다 추가할 수 있습니다. 오버레이를 단색 또는 그라데이션 색상으로 정의하려면 텍스트 편집기로 이동하여 오버레이하려는 이미지에 클래스를 추가합니다.

솔리드: <div class="background-opacity"> … </div>
그라데이션: <div class="background-gradient is-style-default"> … </div>

예를 들어:

그렇게 하면 끝!

평결

이미지에 오버레이를 추가하면 게시물/페이지를 장식하고 방문자에게 더 나은 인상을 줄 수 있습니다. 완벽한 오버레이를 만드는 방법을 파헤쳐 볼 가치가 있으므로 즉시 작업에 착수하는 것이 좋습니다. 슬라이더, 팝업 배너, 비디오 배경 등을 사용하여 웹사이트를 더욱 매력적으로 만들 수도 있습니다. 제 설명이 충분히 이해가 되었기를 바라며 질문이 있으면 언제든지 아래에 의견을 남겨 주십시오. 안녕히 계세요!