代码之家 › 专栏 › 技术社区 › André Hikaru

悬停时模糊/取消模糊2种不同背景

blur webkit hover css html

5

André Hikaru · 技术社区 · 9 年前

在我的代码中,我将浏览器宽度划分为2个div。我计划给每个div应用一个超链接,比如两个大按钮,但在这样做之前,我想给它们应用一些webkit过滤器,这样它们作为按钮就更直观了。

如何将超链接应用到这些div,并在悬停时应用模糊/取消模糊而不模糊文本?

以下是我目前使用的代码: (图片仅用于测试:P)

#containergaleria {
    display: table;
    width: 100%;
}

#containergaleria div {
    display: table-cell;
    width: 50%;
}

#imagens {background-image: url("http://gamerealla.ru/wp-content/uploads/2014/09/1392986721_r1.jpg");
         background-position: right center; 
}

#videos {background-image: url("http://gamehall.uol.com.br/v10/wp-content/uploads/2015/01/Black-Desert-Online-Beast-Master-Woman-02.jpg");
        background-position: left center; 
}


p.centertext {
    margin-top: 25%;
    margin-bottom: 25%
}

body {
    overflow:hidden;
}

<div id="containergaleria">
  
    <div id="imagens"><p class="centertext" align="right"><a class="button-medium pull-center" href="http://stackoverflow.com/" target="_blank">IMAGENS</a>&nbsp;&nbsp;</p></div>
  
    <div id="videos"><p align="left">&nbsp;&nbsp;<a class="button-medium pull-center" href="http://stackoverflow.com/" target="_blank">VÃDEOS</a></p></div>
  
</div>

2 回复 | 直到 9 年前

1

Umer bin Siddique 9 年前

您可以通过在css上的:before元素上使用background来实现。

#imagens:before,
#videos:before {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
content: "";
transition: all .5s ease;
-webkit-transition: all .5s ease;
filter: blur(0);
-webkit-filter: blur(0);
}

#imagens:hover:before,
#videos:hover:before {
filter: blur(2px);
-webkit-filter: blur(2px);
}

#imagens:before {
background-image: url("http://gamerealla.ru/wp-content/uploads/2014/09/1392986721_r1.jpg");
background-position: right center;
}

#videos:before {
background-image: url("http://gamehall.uol.com.br/v10/wp-content/uploads/2015/01/Black-Desert-Online-Beast-Master-Woman-02.jpg");
background-position: left center;
}

检查以下小提琴: https://jsfiddle.net/k486zf3w/

2

0

Community CDub 8 年前

退房 this post 。只能对背景图像应用模糊过滤器 <img/> 标签。但是,使用绝对定位的 <img/> z-index 在你的内容下面,你可以达到同样的效果。