javascript - 在不影响子元素的情况下设置父元素的滤镜亮度-6ren

javascript - 在不影响子元素的情况下设置父元素的滤镜亮度

转载作者：行者123 更新时间：2023-11-28 15:33:41

有没有办法实现在元素上设置 CSS filter: brightness() 的效果，而不影响特定/所有(无关紧要)子元素？

考虑以下示例:

function setBrightness (bright) {
  $('.icon').css('filter', `brightness(${bright})`);
  // None of these work:
  // $('.indicator').css('filter', '');
  // $('.indicator').css('filter', 'brightness(1.0)');
  // $('.indicator').css('filter', `brightness(${1.0/bright})`);
}

window.setInterval(function () {
  let ms = new Date().getTime();
  let bright = Math.cos(2.0 * 3.14 * ms / 3000.0) + 1.0;
  setBrightness(bright);
}, 50);

#bar {
  background: #222;
  font-size: 0;
}

.icon {
  background-image: url(https://cdn.sstatic.net/img/share-sprite-new.svg?v=78be252218f3);
  width: 36px;
  height: 34px;
  display: table-cell;
  text-align: center;
  /* normally middle but set to top to not obscure background for this example: */
  vertical-align: top; 
}

.icon1 {
  background-position: -141px -54px;
}

.icon2 {
  background-position: -220px -54px;
}

.indicator {
  border-radius: 2px;
  color: white;
  display: inline-block;
  font-family: sans-serif;
  font-size: 8pt;
  width: 50%;
}

.icon1 .indicator {
  background: #a00;
}

.icon2 .indicator {
  background: #0f0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="bar">
    <div class="icon icon1">
    <span class="indicator">3</span>
    </div>
    <div class="icon icon2">
      <span class="indicator">10</span>
    </div>
  </div>
</body>

在这里，我在 div(icon 类)中有一个 span，我在 上设置滤镜亮度code>div 是这样的:

$('.icon').css('filter', `brightness(${bright})`);

但是，我希望它仅影响那个背景，而不影响小“指示器”span。也就是说，在上面的代码片段中，图标应该是脉动的，但前景指示器和它们的红色/绿色背景应该保持不变。我唯一想尝试的事情都失败了:

function setBrightness (bright) {
  $('.icon').css('filter', `brightness(${bright})`);
  // None of these work:
  // $('.indicator').css('filter', '');
  // $('.indicator').css('filter', 'brightness(1.0)');
  // $('.indicator').css('filter', `brightness(${1.0/bright})`);
}

此外，重要的是我不对以下内容进行更改:

不能更改 background-* CSS 属性。
不能改变 HTML 的结构，span 必须是 div 的子元素。

顺便说一句，我实际上不需要省略所有子元素的解决方案。我只需要一个给定的 child (那些 span)不受影响，因为我正在使用的结构在每个 div 下没有多个 child ；这个例子很有代表性。不确定这是否重要。

有办法吗？

最佳答案

更改父元素的不透明度将始终更改子元素的不透明度。遗憾的是，没有办法解决这个问题。但是，您可以更改 HTML 结构并将元素绝对定位在彼此之上，然后仅定位要淡出的元素。

$(document).ready(function(){
  function setBrightness (bright) {
  $('.icon').css('filter', `brightness(${bright})`);
}

window.setInterval(function () {
  let ms = new Date().getTime();
  let bright = Math.cos(2.0 * 3.14 * ms / 3000.0) + 1.0;
    setBrightness(bright);
  }, 50);
});

#bar {
		background: #222;
		font-size: 0;
	}

	.icon {
		background-image: url(https://cdn.sstatic.net/img/share-sprite-new.svg?v=78be252218f3);
		width: 36px;
		height: 34px;
		display: inline-block;
		position: absolute;
		top:0;
		left: 0;
	}

	.icon-wrap {
		width: 36px;
		height: 34px;
		text-align: center;
		position: relative;
		display: table-cell;
		/* normally middle but set to top to not obscure background for this example: */
	}

	.icon1 .icon {
		background-position: -141px -54px;
	}

	.icon2 .icon {
		background-position: -220px -54px;
	}

	.indicator {
		border-radius: 2px;
		color: white;
		font-family: sans-serif;
		font-size: 8pt;
		width: 18px;
		height: 14px;
		position: absolute;
		top:0;
		left:50%;
		margin-left: -9px;
	}

	.icon1 .indicator {
		background: #a00;
	}

	.icon2 .indicator {
		background: #0f0;
	}

<div id="bar">
  <div class="icon1 icon-wrap">
    <span class="icon"></span>
    <span class="indicator">3</span>
  </div>
  <div class="icon2 icon-wrap">
    <span class="icon"></span>
    <span class="indicator">10</span>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

也可以使用 CSS3 关键帧:

#bar {
  background: #222;
  font-size: 0;
}

.icon {
  background-image: url(https://cdn.sstatic.net/img/share-sprite-new.svg?v=78be252218f3);
  width: 36px;
  height: 34px;
  display: inline-block;
  position: absolute;
  top:0;
  left: 0;
  -webkit-filter: grayscale(200%); /* Safari 6.0 - 9.0 */
  filter: grayscale(200%);
}

.icon-wrap {
  width: 36px;
  height: 34px;
  text-align: center;
  position: relative;
  display: table-cell;
  /* normally middle but set to top to not obscure background for this example: */
}

.icon1 .icon {
  background-position: -141px -54px;
}

.icon2 .icon {
  background-position: -220px -54px;
}

.indicator {
  border-radius: 2px;
  color: white;
  font-family: sans-serif;
  font-size: 8pt;
  width: 18px;
  height: 14px;
  position: absolute;
  top:0;
  left:50%;
  margin-left: -9px;
}

.icon1 .indicator {
  background: #a00;
}

.icon2 .indicator {
  background: #0f0;
}

@keyframes fader {
  0%   {
    -webkit-filter: grayscale(200%); /* Safari 6.0 - 9.0 */
    filter: grayscale(200%);
  }
  50%  {
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
  }
  100% { opacity:1;
    -webkit-filter: grayscale(200%); /* Safari 6.0 - 9.0 */
    filter: grayscale(200%);
  }
}
@-o-keyframes fader {
  0%   {
   -webkit-filter: brightness(200%); /* Safari 6.0 - 9.0 */
   filter: brightness(200%);
 }
 50%  {
   -webkit-filter: brightness(0%); /* Safari 6.0 - 9.0 */
   filter: brightness(0%);
 }
 100% { opacity:1;
   -webkit-filter: brightness(200%); /* Safari 6.0 - 9.0 */
   filter: brightness(200%);
 }
}
@-moz-keyframes fader {
  0%   {
   -webkit-filter: brightness(200%); /* Safari 6.0 - 9.0 */
   filter: brightness(200%);
 }
 50%  {
   -webkit-filter: brightness(0%); /* Safari 6.0 - 9.0 */
   filter: brightness(0%);
 }
 100% { opacity:1;
   -webkit-filter: brightness(200%); /* Safari 6.0 - 9.0 */
   filter: brightness(200%);
 }
}
@-webkit-keyframes fader {
  0%   {
   -webkit-filter: brightness(200%); /* Safari 6.0 - 9.0 */
   filter: brightness(200%);
 }
 50%  {
   -webkit-filter: brightness(0%); /* Safari 6.0 - 9.0 */
   filter: brightness(0%);
 }
 100% { opacity:1;
   -webkit-filter: brightness(200%); /* Safari 6.0 - 9.0 */
   filter: brightness(200%);
 }
}
.icon {
   -webkit-animation: fader 3s infinite ease-in;
   -moz-animation: fader 3s infinite ease-in;
   -o-animation: fader 3s infinite ease-in;
   animation: fader 3s infinite ease-in;
}

<div id="bar">
  <div class="icon1 icon-wrap">
    <span class="icon"></span>
    <span class="indicator">3</span>
  </div>
  <div class="icon2 icon-wrap">
    <span class="icon"></span>
    <span class="indicator">10</span>
  </div>
</div>

关于javascript - 在不影响子元素的情况下设置父元素的滤镜亮度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44356361/

文章推荐： CSS 旋转在 IE 中不起作用

文章推荐： ios - 导航栏颜色困惑

文章推荐： html - 如何让一个div不填满它父级的高度？

graphics - 如何将 HSL(色调、饱和度、亮度)转换为 HSLum(色调、饱和度、亮度)和 HSLum/RGB？
我想将一些颜色值从众所周知的 HSL 转换为鲜为人知的 HSLum 怎么做？ hsl(0, 1.0, 0.5) - rgb red is hslum(0, 1.0., 0.54) hsl(120,
安卓屏幕类型/亮度
有没有办法在 android 中获取有关屏幕类型的信息？我想知道我使用的设备是 amoled/ips/tft 还是获得屏幕的最大亮度，不是相对亮度，而是尼特或坎德拉/cm2 的亮度最佳答案与设备的
iphone - 确定图像亮度/亮度
我的 iPhone 应用程序使用 AVFoundation 的 AVCaptureSession 从摄像头捕获实时数据。我能够在运行时访问它的委托(delegate)方法中的数据并从中创建图像。它可以
ios - AVCaptureSession 亮度
我正在使用带有 AVFoundation 的前置摄像头开发镜像应用程序。我已经完成了向 UIView 显示相机屏幕。但是如何调整亮度？代码是这样的: -(void)AVCaptureInit {
android - 以编程方式增强 ImageView 亮度
我有一个 android 应用程序，我正在使用下面的代码增加图像的亮度。但这非常慢，所以有没有人知道在 android 中增强 ImageView 的图像亮度的快速方法。请记住，这是提高 ImageV
java - Android:(亮度)设置更改后如何刷新屏幕
我想做的是创建一个代码，以便当用户移动 SeekBar 时，它会更改手机的亮度(随着移动)并将其设置为手机的 MAIN 设置。我已经剪掉了我认为是问题所在的部分代码.. public void onP
Android - 使用搜索栏更改 LED 亮度
我制作了一个手电筒应用程序，可以通过按钮打开相机的 LED 灯。如果可能的话，我希望能够使用搜索栏更改 LED 灯的亮度。如果这有帮助的话，这是我按钮中的代码: public class Flash
ios - 如何在ios中更改录制视频的饱和度、亮度、对比度
我正在开发一款编辑视频的应用。录制视频时没有问题，因为最初我会设置所有设置，如饱和度、亮度、对比度等。但问题在于录制的视频。我无法更改已录制视频的所有上述属性。任何人请告诉我他的问题的解决方案。
html - 不透明度的 CSS 亮度
这个问题在这里已经有了答案: I do not want to inherit the child opacity from the parent in CSS (18 个答案) 关闭 7 年前。
opencv - 如何使两张相机照片看起来相似(亮度、白平衡……)
我有两个网络摄像头(都是罗技 C615)。我想以一种方式调整网络摄像头，使它们在相同的环境中拍摄出几乎相同的照片。 (原因是我想将此图像渲染到 occulus rift 上)。我正在使用 OpenC
html - CSS 图像周围的阴影/亮度
我有一个使用 CSS 创建的圆圈，如下所示: .circle { width: 40px; height: 40px; -moz-border-radius: 50px;
c# - 更快的算法来改变位图中的色相/饱和度/亮度
我正在尝试过滤位图图像以增加或减少色相、饱和度和亮度值。我的代码运行良好，但速度很慢。我在内存中锁定了两个位图，原始源和当前目标。用户可以移动各种 trackbar 控件来修改每个值，然后将其转换
android - 提高使用安卓相机拍摄的照片的质量/清晰度/亮度
我有一个 android 应用程序，我在其中使用 android 相机拍照。经过一番努力后，我设法在我想要的地方和我想要的方式拍摄照片。最后的问题是质量图片。当我的预览开始时，一切看起来都非常清晰和
c++ - 8*8方 block 亮度
是否有c++函数或opencv库可以计算给定8*8 block 或总图像亮度的平均对数？我的目标是计算平均亮度并将其存储回 block 中。另外，有没有另一种适合人类视觉系统的科学方法来计算整体亮度或
php - 服务器端的 CSS 亮度/对比度
寻找答案 2 周。我有一个工具可以直接在网络浏览器中调整图像的对比度和亮度，并使用 CSS3 属性来显示结果。但我还应该将这些修改应用于服务器端的原始 JPG，并将其输出回用户。我该怎么做？我正在使
c++ - 使用 ImageMagick 修改图像对比度/亮度
我正在尝试将对比度和亮度应用于内存中的位图，但我完全迷路了。目前我正在尝试使用 Magick++ 来完成它，但如果其他 API 之一能更好地工作，我会洗耳恭听。我设法找到 Magick::Image:
python - 使用 MCP3002 模数转换器控制 LED 亮度
我正在尝试使用 MCP3002 ADC 和电位计来控制 PWMLED 亮度列表。我的问题是，当我运行我的脚本时，除了连接到 MCP3002 ADC 的电位器之外，一切都按预期运行，它不会在我调整旋钮
opencv - 亮度、YUV 或 HSL 使用哪种色彩空间？
假设我们有一张在光线不足的情况下拍摄的照片。图像比平时更暗，但仍可识别。现在我们想让它更亮，让它看起来像是在充足的光照条件下拍摄的。我们应该将图像转换为 YUV 并调整 Y channel (亮度
javascript - 字体大小增加和对比度/亮度，使用 jquery 的网站声音控制
嗨，我的客户有一个新要求，他需要在他的网站上添加字体大小增加和对比度/亮度、声音控制。因此，在单击任何一个图像时，都会出现一个 slider ，他可以从中执行相应的操作。我如何使用 jquery
java - svg 亮度/透明度效果和滤镜 (Java Android)
我在游戏中使用 SVG 文件，我想为其添加透明度和亮度效果。所以我想要的是 Sprite 变得越来越透明，直到看不见。这看起来比刚刚消失的 Sprite 平滑得多。这还允许在白屏变得不那么透明然后又变

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在不影响子元素的情况下设置父元素的滤镜亮度