时间戳

首页 > 解决方案 > CSS过滤器亮度：它可以分别应用于一个元素的边框和主体吗？

html - CSS过滤器亮度：它可以分别应用于一个元素的边框和主体吗？

问题描述

此元素已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>

我试图弄清楚如何将 CSSfilter: brightness(100%)仅应用于元素的边框。几个小时搜索在线文档没有产生任何结果。如果这很简单，请原谅我，但重申一下，我如何独立地将 CSSfilter: brightness()应用到已经应用了亮度的元素的边框？

标签： htmlcsscss-filters

解决方案

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

.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>

推荐阅读