Question

我想通过给定的半透明div模糊文本和图片。这意味着我不希望背景中的一切变得模糊。

我发现了一个由StackOverflow成员完成的非常有趣的例子：

＆＃13;

body {
  filter: url(#frost-me);
}

.container {
  width: 600px;
  height: 400px;
  background: white;
  position: relative;
}

.content {
  position: relative;
}

＆＃13;

<svg width="0" height="0">
  <defs>
    <rect id="frosty-area" fill="red" x="100" y="100" width="400" height="300"/>
    <filter id="frost-me" x="0%" y="0%" width="100%" height="100%">
      <feImage xlink:href="#frosty-area"/>
      <feComposite operator="in" in="SourceGraphic" result="selection"/>
      <feGaussianBlur stdDeviation="10"/>\
      <feComponentTransfer>
        <feFuncA type="discrete" tableValues="1 1"/>
      </feComponentTransfer>
		  <feComposite operator="in" in2="selection"/>
      <feComposite operator="over" in2="SourceGraphic"/>
    </filter>
  </defs>
</svg>
<div class="container">
  <div class="content">
    <a href="https://codepen.io/mullany/pen/mwrejb">Source</a>
    hqksdhkqhsd ksqdh lkqjsh Fames suscipit potenti ut rhoncus curabitur
    tellus leo libero pulvinar fermentum fringilla nisl scelerisque lacus
    viverra gravida penatibus integer vehicula aenean adipiscing lacinia
    hendrerit curae duis ligula felis placerat
    nullam elementum morbi urna facilisis vulputate magna congue amet id
    neque montes varius accumsan aliquet vivamus ultricies lectus mattis
    volutpat sociis Commodo id est cras venenatis rutrum ante diam lorem
    blandit duis morbi felis sit mattis ut litora
    sollicitudin habitasse semper suscipit lacinia nisl convallis urna
    risus metus sem posuere accumsan suspendisse eros enim curae dis
    libero primis aliquet nullam parturient praesent sagittis taciti nam
    in maecenas nascetur platea tincidunt magnis
  </div>
</div>

＆＃13;

实际上，这个小提琴是我Mikael Mullany作品的极简主义版本。

因为我可能无法（允许）自定义html或php （页面由Wordpress呈现）我认为我可以直接定义并调用svg并进入CSS样式表。我试过这样做，但没有成功。

请看这里：

＆＃13;

body {
  background-image: url("data:image/svg+xml;utf8,<svg width='0' height='0'><defs><rect id='frosty-area' fill='red' x='100' y='100' width='400' height='300'/><filter id='frost-me' x='0%' y='0%' width='100%' height='100%'><feImage xlink:href='#frosty-area'/><feComposite operator='in' in='SourceGraphic' result='selection'/> <feGaussianBlur stdDeviation='10'/><feComponentTransfer><feFuncA type='discrete' tableValues='11'/></feComponentTransfer><feComposite operator='in' in2='selection'/><feComposite operator='over' in2='SourceGraphic'/></filter></defs></svg>");
}

.container {
  width: 600px;
  height: 400px;
  background: white;
  position: relative;
}

.content {
  position: relative;
}

＆＃13;

<div class="container">
  <div class="content">
    <a href="https://codepen.io/mullany/pen/mwrejb">Source</a>
    hqksdhkqhsd ksqdh lkqjsh Fames suscipit potenti ut rhoncus curabitur
    tellus leo libero pulvinar fermentum fringilla nisl scelerisque lacus
    viverra gravida penatibus integer vehicula aenean adipiscing lacinia
    hendrerit curae duis ligula felis placerat
    nullam elementum morbi urna facilisis vulputate magna congue amet id
    neque montes varius accumsan aliquet vivamus ultricies lectus mattis
    volutpat sociis Commodo id est cras venenatis rutrum ante diam lorem
    blandit duis morbi felis sit mattis ut litora
    sollicitudin habitasse semper suscipit lacinia nisl convallis urna
    risus metus sem posuere accumsan suspendisse eros enim curae dis
    libero primis aliquet nullam parturient praesent sagittis taciti nam
    in maecenas nascetur platea tincidunt magnis
  </div>
</div>

＆＃13;

还有更多，它在StackOverFlow的其他地方告诉我，为了更好地成功实现这一点，对svg进行base64编码是一个好习惯。这就是我所做的，但也没有成功：

＆＃13;

body {
  background-image: url("data:image/svg+xml;utf8, PHN2ZyB3aWR0aD0iMCIgaGVpZ2h0PSIwIj48ZGVmcz48cmVjdCBpZ D0iZnJvc3R5LWFyZWEiICBmaWxsPSJyZWQiIHg9IjEwMCIgeT0iMT AwIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIvPjxmaWx0ZXIgaWQ 9ImZyb3N0LW1lIiB4PSIwJSIgeT0iMCUiIHdpZHRoPSIxMDAlIiBo ZWlnaHQ9IjEwMCUiPjxmZUltYWdlIHhsaW5rOmhyZWY9IiNmcm9zd HktYXJlYSIvPjxmZUNvbXBvc2l0ZSBvcGVyYXRvcj0iaW4iIGluPS JTb3VyY2VHcmFwaGljIiByZXN1bHQ9InNlbGVjdGlvbiIvPiA8ZmV HYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxMCIvPjxmZUNvbXBv bmVudFRyYW5zZmVyPjxmZUZ1bmNBIHR5cGU9ImRpc2NyZXRlIiB0Y WJsZVZhbHVlcz0iMSAxIi8+ PC9mZUNvbXBvbmVudFRyYW5zZmVyPjxmZUNvbXBvc2l0ZSBvcGVyY XRvcj0iaW4iIGluMj0ic2VsZWN0aW9uIi8+ PGZlQ29tcG9zaXRlIG9wZXJhdG9yPSJvdmVyIiBpbjI9IlNvdXJjZ UdyYXBoaWMiLz48L2ZpbHRlcj48L2RlZnM+PC9zdmc+");
}

.container {
  width: 600px;
  height: 400px;
  background: white;
  position: relative;
}

.content {
  position: relative;
}

＆＃13;

<div class="container">
  <div class="content">
    <a href="https://codepen.io/mullany/pen/mwrejb">Source</a>
    hqksdhkqhsd ksqdh lkqjsh Fames suscipit potenti ut rhoncus curabitur
    tellus leo libero pulvinar fermentum fringilla nisl scelerisque lacus
    viverra gravida penatibus integer vehicula aenean adipiscing lacinia
    hendrerit curae duis ligula felis placerat
    nullam elementum morbi urna facilisis vulputate magna congue amet id
    neque montes varius accumsan aliquet vivamus ultricies lectus mattis
    volutpat sociis Commodo id est cras venenatis rutrum ante diam lorem
    blandit duis morbi felis sit mattis ut litora
    sollicitudin habitasse semper suscipit lacinia nisl convallis urna
    risus metus sem posuere accumsan suspendisse eros enim curae dis
    libero primis aliquet nullam parturient praesent sagittis tacitinam
    in maecenas nascetur platea tincidunt magnis
  </div>
</div>

＆＃13;

有什么想法吗？

非常感谢。

SVG模糊过滤器内嵌在CSS中。怎么样？

0 个答案: