Question

此元素已经应用了filter: brightness(50%)：

.element {
  width: 300px;
  height: 250px;
  border: 5px solid white;
  padding: 2px;
  background-color: darkblue;
  color: white;
  filter: brightness(50%);
}

<div class="element">
  <p>element has brightness of 50%</p>
  <p>I want the border to have brightness of 100%</p>
  <p>How could one do this?</p>
</div>

我试图弄清楚如何将CSS filter: brightness(100%)仅应用于元素的边框。几个小时的在线文档搜索没有任何结果，请问这是简单的事情，但是请重申如何将CSS filter: brightness()单独应用于已经应用了亮度的元素的边框？

Answer 1

您可以编写另一个CSS类来获取亮度。

.element 
 { 
  width: 300px; 
  height: 250px; 
  padding: 2px; 
  background-color: darkblue; 
  color: white; 
  filter: brightness(50%); 
 } 

.border
 { 
  border: 5px solid rgba(29, 27, 27, 0.9); 
  width: 300px; 
  height: 250px; 
 }

在这里，我将边框颜色设为黑色，以确保是否应用边框。即将来临，您可以使用所需颜色的代码：-）

Answer 2

遇到的问题是，任何过滤器（或其朋友opacity，blur等）都将应用于DIV中的所有内容，例如文字也是如此。

我的方法是创建绝对定位的分层div：

.outer, inner{
  width: 150px;
  height: 75px;
}

.outer{
  padding: 5px;
  background-color: black;
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
  
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
}

.inner{
color: #fff;
  max-width: 140px;
  min-height: 70px;
  background-color: black;
}

<div class="outer">

</div>

<div class="inner">
 element has brightness of 50%
</div>

Answer 3

对背景使用伪元素，然后将过滤器仅应用于子元素和背景。这样，边框就不会受到滤镜的影响，您将获得相同的视觉效果：

.element {
  width: 300px;
  height: 250px;
  padding: 2px;
  background-color: darkblue;
  border:5px solid #fff;
  color: white;
  position:relative;
  z-index:0;
}
.element:before {
  content:"";
  position:absolute;
  z-index:-1;
  background:darkblue;
  top:0;
  left:0;
  right:0;
  bottom:0;
  filter:brightness(50%);
}
.element > * {
  filter:brightness(50%);
}

body {
  background:pink;
}

<div class="element">
  <p>element has brightness of 50%</p>
  <p>I want the border to have brightness of 100%</p>
  <p>How could one do this?</p>
</div>

CSS滤镜亮度：可以单独应用于一个元素的边框和主体吗？

3 个答案: