CSS는 배경 이미지를 흐릿하게 설정하고 내용은 흐릿하지 않도록 설정합니다.
요구 사항: A p는 배경: url을 설정했습니다. 이제 이미지의 배경을 흐리게 하고 p 내의 텍스트를 명확하게 표시해야 합니다.
원본 코드:
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<style type="text/css">
.content { color: #ffffff; font-size: 40px; }
.bg { background: url('1.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; height:600px; text-align: center; line-height: 600px; }
</style></head><body><p class="bg">
<p class="content">我是内容</p></p></body></html>원본 효과: 
해결 방법: 콘텐츠와 이미지가 각각 p에 배치되고, CSS를 통해 배경 p 흐림을 설정하고, 콘텐츠 p의 절대 위치를 설정합니다.
html 코드:
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<style type="text/css">
.content { color: #ffffff; font-size: 40px; }
.bg { background: url('1.jpg'); height:600px; text-align: center; line-height: 600px; }
.bg-blur { float: left; width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; -webkit-filter: blur(15px); -moz-filter: blur(15px); -o-filter: blur(15px); -ms-filter: blur(15px); filter: blur(15px); }
.content-front { position:absolute; left: 10px; right: 10px; height:600px; line-height: 600px; text-align: center; }
</style></head><body>
<p>
<p class="bg bg-blur"></p>
<p class="content content-front">我是内容</p>
</p></p></body></html>효과: 
요구 사항: A p가 배경: url을 설정했습니다. 이제 그림의 배경을 흐리게 하고 p 내의 텍스트를 명확하게 표시해야 합니다. .
원본 코드:
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<style type="text/css">
.content { color: #ffffff; font-size: 40px; }
.bg { background: url('1.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; height:600px; text-align: center; line-height: 600px; }
</style></head><body><p class="bg">
<p class="content">我是内容</p></p></body></html>원본 효과:
해결 방법: 콘텐츠와 이미지가 각각 p에 배치되고, CSS를 통해 배경 p 흐림을 설정하고, 콘텐츠 p의 절대 위치를 설정합니다.
html code:
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<style type="text/css">
.content { color: #ffffff; font-size: 40px; }
.bg { background: url('1.jpg'); height:600px; text-align: center; line-height: 600px; }
.bg-blur { float: left; width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; -webkit-filter: blur(15px); -moz-filter: blur(15px); -o-filter: blur(15px); -ms-filter: blur(15px); filter: blur(15px); }
.content-front { position:absolute; left: 10px; right: 10px; height:600px; line-height: 600px; text-align: center; }
</style></head><body>
<p>
<p class="bg bg-blur"></p>
<p class="content content-front">我是内容</p>
</p></p></body></html>Effect:
읽어주신 모든 분들께 감사드리며, 많은 혜택 받으시길 바랍니다.
이 기사는 다음에서 복제되었습니다: https://blog.csdn.net/oHeHeHou/article/details/51975539
추천 튜토리얼: "css tutorial"
위 내용은 CSS는 배경 이미지를 흐릿하게 설정하고 내용은 흐릿하지 않도록 설정합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7416
15
1359
52
76
11
26
19