<cite id="0xhyt"></cite>
      <blockquote id="0xhyt"></blockquote>
        \n    我是內(nèi)容<\/p><\/p><\/body><\/html><\/pre>
        Original effect: \"css<\/p>
        Solution: The content and image are placed in a p respectively, and the background p blur is set through css , set the absolute position of content p. <\/p>
        html code: <\/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在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱
        \n    
        \n        <\/p>\n        我是內(nèi)容<\/p>\n    <\/p><\/p><\/body><\/html><\/pre>
        Effect: \"css<\/p><\/path><\/svg>##Requirements: A p has a background: url set. Now it is necessary to blur the background of the image and display the text within the p clearly. 
        <\/p>Original code: 
        \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>Original effect: 
        \"css<\/p>Solution: The content and image are placed in a p respectively, and the background p blur is set through css , set the absolute position of content p. 
        <\/p>html code: 
        \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>Effect: 

        \"css<\/p>Thank you all for reading, I hope you will benefit a lot. 
        <\/p>This article is reproduced from: 
        https:\/\/blog.csdn.net\/oHeHeHou\/article\/details\/51975539 <\/a><\/p>Recommended tutorial: 
        \"css tutorial\"<\/a>
        <\/p>"}	
	






	

        
    

        

	
	
        
		
        
			
        
							
        
					
        
						Home
						
												Daily Programming
						
												CSS Knowledge
						
						css sets the background image to be blurry and the content not to be blurry
					
        
					
					
        
						
        
							
        css sets the background image to be blurry and the content not to be blurry
        
							
							Jul 15, 2020 pm	 05:18 PM
														
						
        
					
        
					
        
					
        
						
        
						
						
						

					
        css sets the background image to be blurry and the content not to be blurryRequirement: A p has set the background: url. Now it is necessary to blur the background of the picture and display the text in the p clearly. 
        

        Original code: 
        <!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>
        Original effect: 
        css sets the background image to be blurry and the content not to be blurry
        Solution: The content and image are placed in a p respectively, and the background p blur is set through css , set the absolute position of content 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(&#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>
        Effect: 
        css sets the background image to be blurry and the content not to be blurry
        ##Requirements: A p has a background: url set. Now it is necessary to blur the background of the image and display the text within the p clearly. 
        Original code: 
        <!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>
        Original effect: 

        css sets the background image to be blurry and the content not to be blurry
        Solution: The content and image are placed in a p respectively, and the background p blur is set through css , set the absolute position of content 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(&#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>
        Effect: 

        css sets the background image to be blurry and the content not to be blurry
        Thank you all for reading, I hope you will benefit a lot. 
        This article is reproduced from: 
        https://blog.csdn.net/oHeHeHou/article/details/51975539 
        Recommended tutorial: 
        "css tutorial"
        The above is the detailed content of css sets the background image to be blurry and the content not to be blurry. For more information, please follow other related articles on the PHP Chinese website!
        


						
        
					
        
					
        
						
        Statement of this Website
        
						
        The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
        
					
        
				
        

				



				
        


				
    


					


											
        
							
        
								
        
									
									
        Hot AI Tools
        
								
        
								
        
																		
        
											
												Undress AI Tool
											
											
        
												
													
        Undress AI Tool
        
												        
												
        Undress images for free
        
											
        
										
        
																		
        
											
												Undresser.AI Undress
											
											
        
												
													
        Undresser.AI Undress
        
												        
												
        AI-powered app for creating realistic nude photos
        
											
        
										
        
																		
        
											
												AI Clothes Remover
											
											
        
												
													
        AI Clothes Remover
        
												        
												
        Online AI tool for removing clothes from photos.
        
											
        
										
        
																		
        
											
												Clothoff.io
											
											
        
												
													
        Clothoff.io
        
												        
												
        AI clothes remover
        
											
        
										
        
																		
        
											
												Video Face Swap
											
											
        
												
													
        Video Face Swap
        
												        
												
        Swap faces in any video effortlessly with our completely free AI face swap tool!
        
											
        
										
        
																
        
								
							
        
						
        
					


					


											
        
							
        
								
        
									
									
        Hot Tools
        
								
        
								
        
																		
        
											
												Notepad++7.3.1
											
											
        
												
													
        Notepad++7.3.1
        
												        
												
        Easy-to-use and free code editor
        
											
        
										
        
																			
        
											
												SublimeText3 Chinese version
											
											
        
												
													
        SublimeText3 Chinese version
        
												        
												
        Chinese version, very easy to use
        
											
        
										
        
																			
        
											
												Zend Studio 13.0.1
											
											
        
												
													
        Zend Studio 13.0.1
        
												        
												
        Powerful PHP integrated development environment
        
											
        
										
        
																			
        
											
												Dreamweaver CS6
											
											
        
												
													
        Dreamweaver CS6
        
												        
												
        Visual web development tools
        
											
        
										
        
																			
        
											
												SublimeText3 Mac version
											
											
        
												
													
        SublimeText3 Mac version
        
												        
												
        God-level code editing software (SublimeText3)