我一直在寻找一种解决方案,当用户点击按钮时,它会模糊我所拥有的CSS3背景。
目前HTML如此:
<div class="button">
<li><a href="#" alt="fade button">Start Now</a></li>
</div>
CSS是:
html, body { margin:0px; padding: 0px; background: url(../assets/background.png) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.button {
vertical-align: middle;
width:150px;
margin: 0 auto;
margin-top:200px;
background-color:#81DF7B;
padding:10px;
border-radius: 5px;
text-decoration: none;
color:#333;
font-weight:300;
font-size: 1.3em;
-webkit-transition: background-color 0.3s ease-in-out 0s;
-moz-transition: background-color 0.3s ease-in-out 0s;
-o-transition: background-color 0.3s ease-in-out 0s;
-ms-transition: background-color 0.3s ease-in-out 0s;
transition: background-color 0.3s ease-in-out 0s;
}
.button:hover{
background-color: #00CC33;
cursor:pointer;
}
.button li {padding:20px; text-align:center; text-decoration: none; list-style: none; }
.button li a {text-decoration: none;}
正如您所见,背景图像作为CSS3封面图像附加到html和body。
我想要的是当用户点击“立即开始”按钮时,此背景会平滑过渡到模糊,以便隐藏的表单字段可以清晰地显示在顶部。
我一直在关注blur.js和Jquery模糊,但无法找到实现它的最佳方法。
任何建议都会非常感激:)
答案 0 :(得分:1)
你可以为这个按钮的onclick事件实现这样的css。
.background {
-webkit-filter: blur(10px);
filter: blur(10px);
}