Question

这个想法来自：http://tympanus.net/Development/CreativeGooeyEffects/

每一件事都能很好地离线。但是，当我穿上我的服务器，或与Wamp合作。我的DIV元素刚刚在Firefox上消失了吗？

代码HTML index.html

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800">
      <defs>
        <filter id="goo">
          <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur" />
          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 35 -15" result="goo" />
          <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
      </defs>
    </svg>

代码CSS

.share {
position: relative;
  max-width: 600px;
  height: 100px;
  margin: 0 auto;
 -webkit-filter: url("#goo");
  filter: url('http://www.martmars.com/index.html#goo');
  position: relative;
}

我不明白为什么？（我尝试使用网址＆＃34; http://www ...＆＃34;并使用Chrome但不能使用firefox在线）

Answer 1

所以，

经过多次尝试后我找到了一些东西。如果做：

.share {
  max-width: 600px;
  height: 100px;
  margin: 0 auto;
 -webkit-filter: url("#goo");
  filter: url('../toto.html#goo');
  position: relative;
}

它在任何浏览器中都很好用。但是如果在Index.html中，它是否有效。我不知道为什么。但它的效果很好，每个地方都有：

.share {
  max-width: 600px;
  height: 100px;
  margin: 0 auto;
 -webkit-filter: url("#goo");
  filter: url('../#goo');
  position: relative;
}

Voila：）

CSS将过滤器（svg）应用于Firefox中的DIV

1 个答案: