• \n    我是內(nèi)容<\/p><\/p><\/body><\/html><\/pre>

    原始效果： \"這里寫圖片描述\"<\/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>
    效果： \"這里寫圖片描述\"<\/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>
    原始效果： \"這里寫圖片描述\"<\/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>
    效果： 
    \"這里寫圖片描述\"<\/p>\n
    感謝大家的閱讀，希望大家受益良多。<\/p>\n
    本文轉(zhuǎn)自：https:\/\/blog.csdn.net\/oHeHeHou\/article\/details\/51975539<\/a> <\/p>\n
    推薦教程：《css教程》<\/a>
    <\/p>"}	
	






	

    
    

    

	
	
    
		
    
			
    
							
    
					
    
						Rumah
						
												pengaturcaraan harian
						
												pengetahuan css
						
						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>
    原始效果： 
    這里寫圖片描述
    解決方法：內(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>
    效果： 
    這里寫圖片描述
    需求：一個(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>
    原始效果： 
    這里寫圖片描述
    解決方法：內(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>
    效果： 
    這里寫圖片描述
    

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

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

    推薦教程：《css教程》
    Atas ialah kandungan terperinci css設(shè)置背景圖片模糊，內(nèi)容不模糊. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
    


						
    
					
    
					
    
						
    Kenyataan Laman Web ini
    
						
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    
					
    
				
    

				



				
    


				
    


					


											
    
							
    
								
    
									
									
    Alat AI Hot
    
								
    
								
    
																		
    
											
												Undress AI Tool
											
											
    
												
													
    Undress AI Tool
    
												    
												
    Gambar buka pakaian secara percuma
    
											
    
										
    
																		
    
											
												Undresser.AI Undress
											
											
    
												
													
    Undresser.AI Undress
    
												    
												
    Apl berkuasa AI untuk mencipta foto bogel yang realistik
    
											
    
										
    
																		
    
											
												AI Clothes Remover
											
											
    
												
													
    AI Clothes Remover
    
												    
												
    Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
    
											
    
										
    
																		
    
											
												Clothoff.io
											
											
    
												
													
    Clothoff.io
    
												    
												
    Penyingkiran pakaian AI
    
											
    
										
    
																		
    
											
												Video Face Swap
											
											
    
												
													
    Video Face Swap
    
												    
												
    Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
    
											
    
										
    
																
    
								
							
    
						
    
					


					


											
    
							
    
								
    
									
									
    Alat panas
    
								
    
								
    
																		
    
											
												Notepad++7.3.1
											
											
    
												
													
    Notepad++7.3.1
    
												    
												
    Editor kod yang mudah digunakan dan percuma
    
											
    
										
    
																			
    
											
												SublimeText3 versi Cina
											
											
    
												
													
    SublimeText3 versi Cina
    
												    
												
    Versi Cina, sangat mudah digunakan
    
											
    
										
    
																			
    
											
												Hantar Studio 13.0.1
											
											
    
												
													
    Hantar Studio 13.0.1
    
												    
												
    Persekitaran pembangunan bersepadu PHP yang berkuasa
    
											
    
										
    
																			
    
											
												Dreamweaver CS6
											
											
    
												
													
    Dreamweaver CS6
    
												    
												
    Alat pembangunan web visual
    
											
    
										
    
																			
    
											
												SublimeText3 versi Mac
											
											
    
												
													
    SublimeText3 versi Mac
    
												    
												
    Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
    
											
    
										
    
																	
    
								
							
    
						
    
										

					
					
    
						
    
							
    
								
								
    Topik panas
    
							
    
							
    
															
															
    
									Tutorial PHP
									
    
										
    
											
											1502
										
    
										
    
											
											276