CSS는 배경 이미지를 흐릿하게 설정하고 내용은 흐릿하지 않도록 설정합니다.
- 卡哇伊원래의
- 2020-07-15 17:18:1711039검색
요구 사항: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.