css3 div的模糊效果

Question

我想hover一下div，div的background-color变透明，或者消失，就剩背景的模糊效果。
字体是可以的，为何div设置transparent是白色的效果，请指教~

或者div模糊还有别的好办法嘛

.div1{

  width: 100px;
  height: 100px;
  background-color: #ccc;
 }
 .div1:hover{
  width: 100px;
  height: 100px;
  box-shadow: 0px 0px 25px #ccc;
  background-color: transparent;
 }

Answer 1

你这已经是透明了 只不过由于父容器是白色底 所以显示是白色 你可以hover时候用一张模糊的图片当背景 或者用CSS3的滤镜

Answer 2

不知道你想要的模糊效果是啥效果。
背景色为白色是因为父容器背景色就是白色，你的div背景色透明了就显示父容器的背景色了。
如果想要整个div的模糊效果，可以给该div加个遮罩层，也就是给他添加个子元素，宽高都是100%，背景色半透明，并且给你的div内的文案加个text-shadow，从而有模糊的效果。