\n    我是內(nèi)容<\/p><\/p><\/body><\/html><\/pre>
 原始效果：\"css設(shè)定背景圖片模糊，內(nèi)容不模糊\"<\/p>
#解決方法：內(nèi)容和圖片分別置於一個(gè)p，透過css設(shè)定背景p模糊度，設(shè)定內(nèi)容p絕對(duì)位置。 <\/p>
html程式碼：<\/p>
\n    \n    \n        .content {            color: #ffffff;            font-size: 40px;        }\n        .bg {            background: url('1.jpg');            height:600px;            text-align: center;            line-height: 600px;        }\n        .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);        }\n        .content-front {          position:absolute;          left: 10px;          right: 10px;          height:600px;          line-height: 600px;          text-align: center;        }\n\n    <\/style><\/head>

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂
\n    
\n        <\/p>\n        我是內(nèi)容<\/p>\n    <\/p><\/p><\/body><\/html><\/pre>
效果： \"css設(shè)定背景圖片模糊，內(nèi)容不模糊\"<\/p><\/path><\/svg>
 需求：一個(gè)p設(shè)定了background: url，現(xiàn)在需要讓圖片背景模糊，p內(nèi)的文字清晰顯示。 <\/p>
原始程式碼：<\/p>
\n    \n    \n        .content {            color: #ffffff;            font-size: 40px;        }\n        .bg {            background: url('1.jpg');            background-repeat: no-repeat;            background-position: center;            background-size: cover;            height:600px;            text-align: center;            line-height: 600px;        }\n    <\/style><\/head>\n    我是內(nèi)容<\/p><\/p><\/body><\/html><\/pre>
 原始效果：\"css設(shè)定背景圖片模糊，內(nèi)容不模糊\"<\/p>
#解決方法：內(nèi)容和圖片分別置於一個(gè)p，透過css設(shè)定背景p模糊度，設(shè)定內(nèi)容p絕對(duì)位置。 <\/p>
html程式碼：<\/p>
\n    \n    \n        .content {            color: #ffffff;            font-size: 40px;        }\n        .bg {            background: url('1.jpg');            height:600px;            text-align: center;            line-height: 600px;        }\n        .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);        }\n        .content-front {          position:absolute;          left: 10px;          right: 10px;          height:600px;          line-height: 600px;          text-align: center;        }\n\n    <\/style><\/head>\n    
\n        <\/p>\n        我是內(nèi)容<\/p>\n    <\/p><\/p><\/body><\/html><\/pre>
效果： 
\"css設(shè)定背景圖片模糊，內(nèi)容不模糊\"<\/p>\n
#感謝大家的閱讀，希望大家能受益良多。 <\/p>\n
本文轉(zhuǎn)自：https:\/\/blog.csdn.net\/oHeHeHou\/article\/details\/51975539<\/a> <\/p>\n
推薦教學(xué)：《css教學(xué)》<\/a>
<\/p>"}	
	






	


    



	
	

		

			

							

					

						首頁
						
												每日程式設(shè)計(jì)
						
												css知識(shí)
						
						css設(shè)定背景圖片模糊，內(nèi)容不模糊
					

					
					

						

							
css設(shè)定背景圖片模糊，內(nèi)容不模糊

							
							Jul 15, 2020 pm	 05:18 PM
														
						

					

					

					

						

						
						
						

					
css設(shè)定背景圖片模糊，內(nèi)容不模糊需求：一個(gè)p設(shè)定了background: url，現(xiàn)在需要讓圖片背景模糊，p內(nèi)的文字清晰顯示。 


原始程式碼：
<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <style type="text/css">
        .content {            color: #ffffff;            font-size: 40px;        }
        .bg {            background: url(&#39;1.jpg&#39;);            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">我是內(nèi)容</p></p></body></html>
 原始效果：
css設(shè)定背景圖片模糊，內(nèi)容不模糊
#解決方法：內(nèi)容和圖片分別置於一個(gè)p，透過css設(shè)定背景p模糊度，設(shè)定內(nèi)容p絕對(duì)位置。 
html程式碼：
<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <style type="text/css">
        .content {            color: #ffffff;            font-size: 40px;        }
        .bg {            background: url(&#39;1.jpg&#39;);            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">我是內(nèi)容</p>
    </p></p></body></html>
效果： 
css設(shè)定背景圖片模糊，內(nèi)容不模糊
 需求：一個(gè)p設(shè)定了background: url，現(xiàn)在需要讓圖片背景模糊，p內(nèi)的文字清晰顯示。 
原始程式碼：
<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <style type="text/css">
        .content {            color: #ffffff;            font-size: 40px;        }
        .bg {            background: url(&#39;1.jpg&#39;);            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">我是內(nèi)容</p></p></body></html>
 原始效果：
css設(shè)定背景圖片模糊，內(nèi)容不模糊
#解決方法：內(nèi)容和圖片分別置於一個(gè)p，透過css設(shè)定背景p模糊度，設(shè)定內(nèi)容p絕對(duì)位置。 
html程式碼：
<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <style type="text/css">
        .content {            color: #ffffff;            font-size: 40px;        }
        .bg {            background: url(&#39;1.jpg&#39;);            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">我是內(nèi)容</p>
    </p></p></body></html>
效果： 
css設(shè)定背景圖片模糊，內(nèi)容不模糊


#感謝大家的閱讀，希望大家能受益良多。 


本文轉(zhuǎn)自：https://blog.csdn.net/oHeHeHou/article/details/51975539 


推薦教學(xué)：《css教學(xué)》
以上是css設(shè)定背景圖片模糊，內(nèi)容不模糊的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！



						

					

					

						
本網(wǎng)站聲明

						
本文內(nèi)容由網(wǎng)友自願(yuàn)投稿，版權(quán)歸原作者所有。本站不承擔(dān)相應(yīng)的法律責(zé)任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容，請(qǐng)聯(lián)絡(luò)admin@php.cn

					

				


				



				



				
    


					


											

							

								

									
									
熱AI工具

								

								

																		

											
												Undress AI Tool
											
											

												
													
Undress AI Tool

												
												
免費(fèi)脫衣圖片

											

										

																		

											
												Undresser.AI Undress
											
											

												
													
Undresser.AI Undress

												
												
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片

											

										

																		

											
												AI Clothes Remover
											
											

												
													
AI Clothes Remover

												
												
用於從照片中去除衣服的線上人工智慧工具。

											

										

																		

											
												Clothoff.io
											
											

												
													
Clothoff.io

												
												
AI脫衣器

											

										

																		

											
												Video Face Swap
											
											

												
													
Video Face Swap

												
												
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！

											

										

																

								
							

						

					


					


											

							

								

									
									
熱工具

								

								

																		

											
												記事本++7.3.1
											
											

												
													
記事本++7.3.1

												
												
好用且免費(fèi)的程式碼編輯器

											

										

																			

											
												SublimeText3漢化版
											
											

												
													
SublimeText3漢化版

												
												
中文版，非常好用

											

										

																			

											
												禪工作室 13.0.1
											
											

												
													
禪工作室 13.0.1

												
												
強(qiáng)大的PHP整合開發(fā)環(huán)境

											

										

																			

											
												Dreamweaver CS6
											
											

												
													
Dreamweaver CS6

												
												
視覺化網(wǎng)頁開發(fā)工具

											

										

																			

											
												SublimeText3 Mac版
											
											

												
													
SublimeText3 Mac版

												
												
神級(jí)程式碼編輯軟體(SublimeText3)

											

										

																	

								
							

						

										

					
					

						

							

								
								
熱門話題

							

							

															

									Laravel 教程
									

										

											
											1601
										

										

											
											29
										

									

								

															

									PHP教程
									

										

											
											1502
										

										

											
											276