Question

我有这个HTML

public void killProcess(String PID) {
    try {
        Process p = Runtime.getRuntime().exec("/system/bin/kill " + PID);
        p.waitFor();
        if (p.waitFor()==0){
            Toast.makeText(getBaseContext(), "Process: " + PID + " has been killed.", Toast.LENGTH_SHORT).show();
        } else Toast.makeText(getBaseContext(), "Argument must be process ID or kill process: " + PID + " is not permitted.", Toast.LENGTH_LONG).show();
    } catch (Exception e) {
        e.printStackTrace();
        Toast.makeText(getBaseContext(), e.getMessage().toString(), Toast.LENGTH_SHORT).show();
    }
}

这个CSS

    <div class="artist_photo">
        <div class="artist_name">
        </div>
    </div>

来自.artist_photo { background-image: url('path/to/artist/photo'); -webkit-filter: grayscale(1); } .artist_name { background-color: rgba(228,88,0,0.9); } div的照片根据需要显示为黑白，但.artist_photo div也是如此。如何从子div中删除过滤器？

谢谢

Answer 1

这不能按照您的要求完成;与filter非常相似的opacity属性将应用于元素及其所有内容。解决此问题的一种方法是使用伪元素（例如::before或::after）来包含您希望以灰度显示的图像：

＆＃13;

.artist_photo {
  width: 200px;
  height: 300px;
}
.artist_photo::after {
  content: url('http://lorempixel.com/200/300/people/2');
  display: block;
  -webkit-filter: grayscale(1);
}
.artist_name {
  background-color: rgba(228, 88, 0, 0.9);
}

＆＃13;

<div class="artist_photo">
  <div class="artist_name">Some text</div>
</div>

＆＃13;

JS Fiddle demo

或者你可以使用另一个元素将.artist_name和.artist_photo包装为兄弟姐妹，将过滤器应用于.artist_photo：

＆＃13;

.artist_wrapper {
  width: 200px;
  height: 300px;
}
.artist_photo {
  background-image: url('http://lorempixel.com/200/300/people/2');
  -webkit-filter: grayscale(1);
  width: 100%;
  height: 100%;
}
.artist_name {
  background-color: rgba(228, 88, 0, 0.9);
}

＆＃13;

<div class="artist_wrapper">
  <div class="artist_name">Some text</div>
  <div class="artist_photo">
  </div>
</div>

＆＃13;

JS Fiddle demo

在容器div上应用过滤器而不是子div

1 个答案: