jord8on
3월 4, 2020, 5:38오후
1
이 게시물에 대한 후속 질문이 있습니다: Create background gradient overlay on page, making the discussion area white
모바일에서 포럼 하단으로 내려가면 배경이 "추천 주제(Suggested Topics)"와 겹쳐서 가독성이 떨어지는 것을 알 수 있습니다.
페이지 상단은 그대로 유지하면서 y축(세로 방향) 하단으로 갈수록 투명도를 더 높이고 싶습니다. 현재 사용 중인 코드는 다음과 같습니다…
body {
background: radial-gradient(circle at center, rgba(255,255,255,1) 50%, rgba(255,255,255,0)) fixed, url(https://forums.pickleballist.com/uploads/default/original/1X/e7792afe9a5b7fbd26141c3c21e82b70cd495069.svg) center top / 300px auto ;
background-attachment: fixed;
}
위 코드가 커뮤니티에 적용한 배경은 다음과 같습니다:
데스크톱에서는 배경이 추천 주제와 크게 충돌하지 않지만, 모바일 기기에서는 조금 더 무겁게 느껴집니다.
다시 말하지만, y축 하단에서 투명도를 더 높이고 싶습니다. 제 코드에 적용할 수 있는 조정 방법이 있을까요?
jord8on
3월 4, 2020, 6:03오후
2
어떤 작은 해킹 방법을 찾았어요. 가장 좋은 해결책은 아닐 수 있지만, 제가 원하는 동작은 확실히 하니까 여기 기록해 두고, 만약 이 방법이 좋지 않다면 누군가 알려주길 바랍니다!
화면 하단의 추천 주제(Suggested topics) 영역의 기본 CSS는 다음과 같습니다:
.suggested-topics {
clear: left;
padding: 20px 0 15px 0;
}
그래서 커스텀 CSS에 다음 내용을 추가했습니다("clear: left"는 건드리지 않았습니다)…
.suggested-topics {
padding: 20px;
background: rgba(255, 255, 255, 0.6);
}
실제로 꽤 잘 작동했습니다!
모바일에서 적용 전후 비교입니다:
아, 맞다. background-attachment: fixed가 iOS에서 동작하지 않는다는 걸 잊고 있었네… 성능에 악영향을 미친다는 이유로 스크롤 시 전체 화면이 다시 그려지는 문제를 방지하기 위해 iOS에서 이 기능을 비활성화했거든.
대안은 몇 가지 있다…
예시 CSS
body.mobile-view {
background: none;
}
body.mobile-view:after {
content:"";
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
z-index:-1;
display:block;
background: radial-gradient(circle at center, rgba(255,255,255,1) 50%, rgba(255,255,255,0)) fixed, url(https://forums.pickleballist.com/uploads/default/original/1X/e7792afe9a5b7fbd26141c3c21e82b70cd495069.svg) center top / 300px auto;
background-size:cover;
}
…다만 이 방식으로 기능을 활성화하더라도 여전히 성능 문제가 발생할 수 있으므로, 이 방식에 만족하지 못한다면 모바일용 배경 처리 방식을 완전히 다르게 적용해 보는 것을 추천한다.
jord8on
3월 4, 2020, 7:01오후
4
대단해요! @awesomerobot님 , 감사합니다! 늘 놀라운 디자인 실력에 감탄합니다!
