PROMULGATOR

    Julius

    山东省济南市
    Html
    Css
    Js

    
                        


                        

                            


section {
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

.blur-container {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.blur-container::before, .blur-container::after {
  top: 0px;
  left: 0px;
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
}
.blur-container .container-fluid {
  z-index: 10;
  width: 100%;
  height: 100%;
}
.blur-container .blur-box {
  display: block;
  position: relative;
}
.blur-container .blur-box::before, .blur-container .blur-box::after {
  top: 0px;
  left: 0px;
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
}
.blur-container.blur-1 {
  --bg: url(https://images.pexels.com/photos/208701/pexels-photo-208701.jpeg?w=940&h=650&auto=compress&cs=tinysrgb);
  color: #444;
  padding: 0px 20px;
  background-image: var(--bg);
}
.blur-container.blur-1 .blur-box {
  width: 100%;
  height: 300px;
  max-width: 600px;
}
.blur-container.blur-1 .blur-box h2 {
  font-size: 40px;
}
.blur-container.blur-1 .blur-box p {
  font-size: 25.4px;
}
.blur-container.blur-1 .blur-box::before {
  z-index: 10;
  opacity: 0.5;
  -webkit-filter: blur(8px);
          filter: blur(8px);
  background-color: #fff;
}
.blur-container.blur-1 .blur-box::after {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  -webkit-filter: blur(8px);
          filter: blur(8px);
  background-image: var(--bg);
}
.blur-container.blur-2 {
  --bg: url(https://images.pexels.com/photos/269923/pexels-photo-269923.jpeg?w=940&h=650&auto=compress&cs=tinysrgb);
  background-image: var(--bg);
}
.blur-container.blur-2 .blur-box {
  color: #ddd;
  width: 100%;
  height: 100%;
  max-width: 400px;
  overflow: hidden;
}
.blur-container.blur-2 .blur-box h2 {
  font-size: 37px;
}
.blur-container.blur-2 .blur-box::before {
  z-index: 10;
  opacity: 0.5;
  background-color: #666;
}
.blur-container.blur-2 .blur-box::after {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  -webkit-filter: blur(10px);
          filter: blur(10px);
  background-image: var(--bg);
}
.blur-container.blur-3 {
  --bg: url("http://2.bp.blogspot.com/-lVUStmbfBlk/UkPjrvsS7eI/AAAAAAAAOi0/-M2LqsBNQv0/s1600/iphone_5_wallpaper+(2).png");
  background-image: var(--bg);
}
.blur-container.blur-3 .blur-box {
  color: #31405e;
  width: 100%;
  height: 100%;
  max-height: 300px;
  overflow: hidden;
}
.blur-container.blur-3 .blur-box h2 {
  font-size: 37px;
}
.blur-container.blur-3 .blur-box::before {
  z-index: 10;
  opacity: 0.5;
  background-color: #fff;
}
.blur-container.blur-3 .blur-box::after {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  -webkit-filter: blur(15px) brightness(110%);
          filter: blur(15px) brightness(110%);
  background-image: var(--bg);
}
.blur-container.blur-4 {
  --bg: url(http://cdn.mos.cms.futurecdn.net/9b6414c04c7305133fa9346d447eef9d-1200-80.jpg);
  background-image: var(--bg);
}
.blur-container.blur-4 .blur-box {
  color: #31405e;
  width: 100%;
  height: 300px;
  max-width: 500px;
  overflow: hidden;
  border-radius: 10px;
}
.blur-container.blur-4 .blur-box h2 {
  font-size: 37px;
}
.blur-container.blur-4 .blur-box::before {
  z-index: 10;
  opacity: 0.3;
  background-color: #fff;
  border-radius: 10px;
}
.blur-container.blur-4 .blur-box::after {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  border-radius: 10px;
  -webkit-filter: blur(15px) brightness(140%);
          filter: blur(15px) brightness(140%);
  background-image: var(--bg);
}
.blur-container.blur-5 {
  --bg: url(https://images.pexels.com/photos/24344/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb);
  background-image: var(--bg);
}
.blur-container.blur-5 .blur-box {
  color: #fff;
  width: 100%;
  height: 300px;
  overflow: hidden;
}
.blur-container.blur-5 .blur-box .btn {
  color: #fff;
  -webkit-transition: 0s;
  transition: 0s;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  padding: 10px 40px;
  border: 2px solid #fff;
}
.blur-container.blur-5 .blur-box .btn span {
  position: relative;
  z-index: 10;
}
.blur-container.blur-5 .blur-box .btn::before, .blur-container.blur-5 .blur-box .btn::after {
  content: '';
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: block;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  position: absolute;
}
.blur-container.blur-5 .blur-box .btn:hover::before {
  opacity: 0.2;
  background-color: #999;
}
.blur-container.blur-5 .blur-box .btn:hover::after {
  -webkit-filter: blur(4px) brightness(120%);
          filter: blur(4px) brightness(120%);
}
.blur-container.blur-5 .blur-box .btn::before {
  z-index: 10;
  opacity: 0.4;
  background-color: #333;
}
.blur-container.blur-5 .blur-box .btn::after {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-image: var(--bg);
  -webkit-filter: blur(4px) brightness(70%);
          filter: blur(4px) brightness(70%);
}
.blur-container.blur-5 .blur-box::before {
  z-index: 10;
  opacity: 0.4;
  background-color: #333;
}
.blur-container.blur-5 .blur-box::after {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-image: var(--bg);
  -webkit-filter: blur(4px) brightness(70%);
          filter: blur(4px) brightness(70%);
}
.blur-container.blur-6 {
  --bg: url(https://images.pexels.com/photos/621/nature-field-summer-agriculture.jpg?w=940&h=650&auto=compress&cs=tinysrgb);
  background-image: var(--bg);
}
.blur-container.blur-6 .row {
  width: 100%;
}
.blur-container.blur-6 .blur-box {
  color: #fff;
  width: 100%;
  height: 300px;
}
.blur-container.blur-6 .blur-box.bg-light::before {
  z-index: 10;
  opacity: 0.4;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  background-color: #fff;
}
.blur-container.blur-6 .blur-box.bg-light::after {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-image: var(--bg);
  -webkit-filter: blur(4px) brightness(120%);
          filter: blur(4px) brightness(120%);
}
.blur-container.blur-6 .blur-box.bg-normal::after {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  background-image: var(--bg);
}
.blur-container.blur-6 .blur-box.bg-dark::before {
  z-index: 10;
  opacity: 0.4;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  background-color: #333;
}
.blur-container.blur-6 .blur-box.bg-dark::after {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-image: var(--bg);
  -webkit-filter: blur(4px) brightness(70%);
          filter: blur(4px) brightness(70%);
}
.blur-container.blur-7 {
  --bg: url(https://images.pexels.com/photos/4173/nature-forest-plant-tropic.jpeg?w=940&h=650&auto=compress&cs=tinysrgb);
  background-image: var(--bg);
}
.blur-container.blur-7 .blur-box {
  color: #fff;
  width: 100%;
  height: 90%;
  max-width: 600px;
  max-height: 400px;
}
.blur-container.blur-7 .blur-box::after {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.9;
  background-image: var(--bg);
  -webkit-filter: blur(6px) brightness(100%);
          filter: blur(6px) brightness(100%);
}
.blur-container.blur-8 {
  --bg: url(https://images.pexels.com/photos/26178/pexels-photo-26178.jpg?w=940&h=650&auto=compress&cs=tinysrgb);
  overflow: hidden;
  background-image: var(--bg);
}
.blur-container.blur-8::after {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.8;
  -webkit-filter: blur(6px);
          filter: blur(6px);
  background-image: var(--bg);
}
.blur-container.blur-8 .blur-box {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #fff;
  width: 100%;
  height: 90%;
  z-index: 11;
  max-width: 600px;
  max-height: 400px;
  border-radius: 10px;
  background-image: var(--bg);
  box-shadow: 0px 0px 30px #333;
}


                        

                        



                        

                   

                    
                   

                       
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

                       
 
  立即下载    

                       

                   


                

                


                

                     
 
                         

                            
网站Blur模糊效果

                            

                                
	
                                      
                                                                      
                                    
                                    	
                                                                                                  	                             
                                    
                                                                       
                                

                            

                            

                        

                          

                             
                          

                         

                             
                             
网站Blur模糊效果

                         

                     

                   
                


                
0