初学者 css => 仅将属性应用于一个元素答案

【问题标题】：beginner css => apply property to only one element初学者 css => 仅将属性应用于一个元素
【发布时间】：2017-04-08 16:29:26
【问题描述】：

所以我有这个代码：

<html>

<head>

<style>

html { 
background: url(bg_image.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

</style>

</head>

<body>

<img src="logo.png">

</body>

</html>

如何在不影响 logo.png 的情况下为背景图片添加亮度？

编辑：我尝试添加行“过滤器：亮度（0.5）；”到 css，但徽标和其他所有内容都会受到影响，因为此属性适用于整个 HTML 代码。我该如何克服这个问题？

谢谢

【问题讨论】：

“增加亮度”是什么意思？你试过什么？
@MichaelCoker 问题已编辑。
您尝试将过滤器添加到什么？哪个元素？ - 请添加minimal reproducible example 以便更快地进行故障排除
CSS adjust brightness of image background and not content的可能重复

标签： html css web responsive-design frontend

【解决方案1】：

您可以将背景放在它自己的独特元素中，并使用否定的z-index 将其放在其余内容的后面。

body {
  min-height: 300vh;
}
.bg {
  background: url('http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg') no-repeat center center / cover;
  filter: brightness(0.5);
  position: fixed;
  z-index: -1;
  top: 0; left: 0; right: 0; bottom: 0;
}

<div class="bg"></div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">

【讨论】：

【解决方案2】：

你可以使用额外的库来简化你的工作；像material Ui这样的库为你提供了一种叫做纸的东西，它充当了一个包装器，因此你可以轻松地更改它的属性和属性。

如上所述，更改 z-index: -1 是一个很好的起点。

【讨论】：