요구 사항: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!