배너 박스의 불투명도를 변경하는 방법은?

개발
1

배너 박스의 투명도를 변경할 수 있나요?

2

@JamesDb

테마 설정의 banner_box_background_color에 rgba() 값을 입력할 수 있습니다. 이곳과 같은 생성기를 사용해 해당 설정에 사용할 RGBA 값을 복사하여 붙여넣을 수 있습니다.

대신, 테마에 사용자 지정 CSS를 추가하여 opacity 속성을 적용할 수도 있습니다:

.below-site-header-outlet.welcome-link-banner-connector .welcome-wrapper {
    opacity: 0.5; // 0과 1 사이의 값을 사용하세요
}

다만, 위의 CSS 방법은 콘텐츠의 투명도도 변경하므로 텍스트의 투명도도 낮아지게 됩니다.

3

변수(예: var(--secondary))는 유지하면서 투명도를 추가할 수 있는 방법이 있을까요?

라이트 모드와 다크 모드에 따라 자동으로 변경되도록 하려는 것입니다.

수정: 이미 rgba(var(--secondary), 0.5)를 시도해 보았습니다.

4

이렇게 하면 작동할 것 같습니다(다만 테스트는 해보지 않았습니다):

rgba(--var(--secondary-rgb), 0.5)
5

동작하지 않습니다. 단순히 색을 완전히 제거할 뿐입니다.

6

음, 왜 그런지 알겠네요. 코드가 이를 지원하려면 background-color 속성을 사용해야 하지만, 현재는 background를 사용하고 있습니다.

테마 CSS에 다음을 추가하면 작동해야 합니다:


.below-site-header-outlet.welcome-link-banner-connector .welcome-wrapper {
    background-color: rgba(var(--secondary-rgb), 0.5);
}
7

멋지네요, 잘 작동했습니다! 감사합니다!