테마 CSS에 다음과 같은 코드를 사용하여 .svg 배경 패턴(반복)을 은은하게 추가했습니다:
body {
background:url(https://forums.pickleballist.com/uploads/default/original/1X/b7df60bb8a3fd1584f393dee365865ca83e4906e.svg) center top;
background-size: 300px auto;
}
새로운 Discourse 설치 환경에서 기본 .wrap 영역은 max-width: 1110px;입니다. 현재 배경이 페이지 중앙의 대화 텍스트(주 콘텐츠 영역)에 약간 시선을 분산시키고 있습니다.
텍스트와 토론이 이루어지는 중앙의 main-outlet 영역의 정중앙은 0% 투명도로 설정하여 흰색 배경만 보이게 하고, 그 주변으로 배경의 투명도가 점차 100%로 증가하는 그라데이션을 적용하여 페이지 가장자리를 따라 배경이 보이도록 하고 싶습니다.
다음과 같이 만들고 싶습니다…
빨간색으로 표시된 일반적인 영역(정확하지 않아도 됩니다)은 배경 투명도가 0%가 되어 기본인 완전한 흰색 배경이 유지되도록 하고 싶습니다. (정확하지는 않지만, 이는 배경에 중앙에서 #FFFFFF(흰색)부터 가장자리로 투명색까지 이어지는 수평 선형 그라데이션 오버레이가 필요할 수 있습니다)
맞아, 그라데이션 오버레이가 아마 가장 좋은 접근 방식일 거야… 이렇게 하면 두 개의 배경을 동시에 정의할 수 있어:
body {
background: radial-gradient(circle at center, rgba(255,255,255,1) 35%, rgba(255,255,255,0)) fixed, url(https://forums.pickleballist.com/uploads/default/original/1X/b7df60bb8a3fd1584f393dee365865ca83e4906e.svg) center top / 300px auto ;
background-attachment: fixed;
}
혹은 이 배경 그라데이션을 다른 페이지(프로필, 주제 목록 등)가 아닌 주제 페이지에만 적용하고 싶다면… 패턴을 body에 두고 그 위에 .archetype-regular #main-outlet { } 안에 그라데이션 배경을 넣을 수 있어.
Kris! 정말 훌륭하게 작동했어요 (아래 이미지 참조)! 빠른 답변 정말 감사드립니다!!
한 가지 더 질문이 있는데… 모범 사례와 효율성의 관점에서 제가 하고 싶은 일을 수행하는 가장 좋은 방법인가요? 이것이 가장 “가볍고” 효율적인 솔루션인가요? 아니면 반복되지 않는 정적 이미지나 다른 솔루션이 리소스/대역폭 등을 덜 사용하면서 제가 원하는 일을 하는 더 나은 방법이 될 수 있을까요?
제 추측으로는 CSS 그라디언트로 반복 패턴을 만드는 것이 최선의 접근 방식일 것입니다… 정적 이미지는 훨씬 더 큰 용량을 차지할 가능성이 높으며, 더 큰 파일을 다운로드하는 것은 다른 어떤 것보다 더 큰 영향을 미칠 가능성이 큽니다(그라디언트를 생성하는 CSS보다 확실히 더 많은 대역폭을 소모하게 됩니다).
︎ svg가 아닌 배경 이미지를 사용하여 달성할 수 있지만, 화질이 너무 거칠었습니다. 배경으로 고품질 이미지를 원했기 때문에 현재는 svg를 사용하고 있습니다.