Question

因此，我正在学习HTML和CSS，这就是我想要做的。

public class MyAdapter extends ArrayAdapter { // this is not activity
    private Activity mActivity; // activity is a member of this class.

    public MyAdapter(Activity activity, List<String> data) {
        mActivity = activity;
    }

    public View getView(...) {
        // if you need to use findViewById: 
        View view = mActivity.findViewById(R.id.some_id);
    }

}

我正在使用此https://vincentgarreau.com/particles.js/，这是我的实际代码的最小示例。我在<!DOCTYPE html> <html> <head> <style type="text/css"> .floatdiv { position: absolute; display: inline-block; transform: translateX(50%); text-align: center; } .basediv { position: relative; width: 100%; height: 100%; } </style> </head> <body> <div class="basediv" id="particle">  <div class="floatdiv"></div> </div> </body> </html>中有一些文本内容，它们停留在页面中间，并且在floatdiv上。现在basediv具有粒子动画。现在，我要做的是模糊basediv下方的粒子动画。我无法使flaotdiv模糊，这将使内容模糊，也无法使floatdiv模糊，这将使粒子到处模糊。因此，如何仅模糊basediv

的背景

编辑：嗯，这可能令人困惑，但是我实际上希望粒子在floatdiv下移动时变得模糊。有可能吗？

Answer 1

不可能忽略子元素。

您需要像这样更改html标记

<div class="basediv"  style="position:relative;height:100px;width:100px;">
  <div id="particle" style="position:absolute;top:0;left:0;right:0;bottom:0;background-color:red; filter: blur(4px);z-index:-1;"> active particle js</div>
  <div class="floatdiv">some text</div>
</div>

Answer 2

如果将 backdrop-filter：blur（4px）和 -webkit-backdrop-filter：blur（4px） css属性应用于 floatdiv 。它将使floatdiv内容下的所有内容模糊，而floatdiv的内容将保持清晰。但是，并非所有浏览器都支持该属性，实际上，它的支持非常有限（请在https://caniuse.com/#feat=css-backdrop-filter上查看支持表）。

Answer 3

如果我对问题的理解正确，那么有一种方法可以解决此样式问题。

请尝试使用box-shadow方法而不是blur（），因为它不会模糊floatdiv的内容。 https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

以下示例可能会有所帮助：

.floatDivBlurred{
  transform: translateX(50%);
  text-align: center;
  background-color: green;
  height: 100px;
  width: 200px;
  box-shadow:  0 0 8px 5px  green;
}


.floatDivBot{
  transform: translateX(50%);
  text-align: center;
  background-color: green;
  height: 100px;
  width: 200px;
  box-shadow: 0 50px 20px #99ff99;
}

.basediv{
  position: relative;
  width: 100%;
  height: 100%;
}

<body>
<div class="basediv" id="particle"> <!-- particles lives here -->  
    <div class="floatDivBlurred">
        <p><font color="white"> floatDiv blurred </font></p>
    </div>
    
    <div class="floatDivBot">
        <p><font color="white"> floatDiv bottom blurred/extended </font></p>
    </div>
</div>
</body>

html-css使div模糊化

3 个答案: