너무 장황하게 설명하지 않고 기본 사항에 대해 이야기해 보겠습니다. 때로는 프런트 엔드에서 배경을 흐리게 해야 하지만 먼저 효과를 살펴보겠습니다.
구체적인 구현은 다음과 같습니다.
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>배경 흐림</title></head><body> <div class=main><!-- 다음 배경은 흐릿하고 다른 콘텐츠는 선명합니다--><!-- 콘텐츠 레이어--> <div class=banner> <div class=banner-contain> <h1>내가 콘텐츠입니다</h1> </div> <! 배경 레이어 --> <div class=banner-bg></div> </div> </div> <style> .main{ width: 100%; } .banner{ width: 100%; .banner-bg{ width: 100%;/*폭이 화면을 채웁니다*/ padding-top: 52.734%;/*이미지 높이를 너비로 나누어 이 값을 얻습니다*/ background: url(test.jpg)center center no-repeat;/*두 센터는 각각 가로 및 세로 정렬입니다*/ background-size: 100%;/*배경은 가로로 펼쳐집니다*/ filter:blur(10px) /* 흐림 값이 클수록 흐려집니다.*/ } .banner-contain{ position:absolute;/*콘텐츠 레이어의 절대 위치 설정*/ width: 100% text-align: z-index; : 6;/*콘텐츠를 맨 위로 가져오기*/ margin-top: 6% } </style></body></html> 1. 적응형 구현:div 태그의 padding-top을 백분율로 설정합니다. 패딩 및 여백 백분율 값은 화면 높이가 아닌 너비를 기준으로 계산되므로 그에 따라 적응 영역을 설정할 수 있습니다. 예를 들어 이미지 정보는 다음과 같습니다. 다음
그러면 높이 대 너비 비율은 540/1024이며 이는 약 52.734%입니다. 즉, 높이는 너비의 52.734%입니다. 여기서 너비는 100%로 설정되고 너비의 padding-top 다음과 같습니다. 52.734%*100%
두 개의 레이어를 설정합니다. 하나는 배경 흐림 레이어이고, 전체 외부 div 컨테이너를 적응적으로 지원하고, filter:blur() 속성을 통해 흐림 값을 설정하고, 다른 하나는 콘텐츠 레이어, 절대 위치 지정, Z-인덱스를 설정하여 증가시킵니다. 콘텐츠 레이어 콘텐츠 레이어가 블러링의 영향을 받지 않도록 레이어가 차단되는 것을 방지합니다.
위 내용은 명확하고 적응력 있는 내용을 구현하기 위해 편집자가 프런트 엔드에서 소개하는 예제 코드입니다. 질문이 있으시면 저에게 메시지를 남겨주시고 편집자에게 알려주시기 바랍니다. 시간 내에 답변해 드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!
이 글이 도움이 되셨다면 재인쇄하셔도 좋고, 출처를 밝혀주시면 감사하겠습니다!