Question

所以这就是我想做的事情

我正在制作一个页面中有一个文本框，而我想让它做的是让它背后的图片仅在文本框中模糊。我解释这个很糟糕，所以我会在这里做一个图表

~~~~background~~~
~~~~~~~~~~~~~~~~~
~~~~XXXXXXXXX~~~~
~~~~XXXXXXXXX~~~~
~~~~XX-Box-XX~~~~
~~~~XXXXXXXXX~~~~
~~~~XXXXXXXXX~~~~
~~~~~~~~~~~~~~~~~

我想要的是“X”背后的背景模糊

Answer 1

这可以通过使用template<typename T> struct A { template<int> static void f(int) {} }; template<> struct A<void(int, int, int)> { static const int f = 0; };，filter: blur();和伪元素z-index或:before属性来实现，但这应该以某种方式应用，以便在框应该看在图像的前面。

请查看以下代码或结帐 CWG 1390 。

:after

.box {
  padding: 10px 20px;
  border: 1px solid #fff;
  color: #fff;
  position: relative;
  z-index: 2;
}

.box p {
  position: relative;
  z-index: 1;
}

.box:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/T1G833T4BI.jpg');
  filter: blur(6px);
  z-index: 1;
}

希望这有帮助！

（CSS）创建具有模糊背景的框

1 个答案: