Question

所以我有这段代码：

<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的情况下为背景图像添加亮度？

编辑：我尝试添加行＆＃34; filter：brightness（0.5）;＆＃34;到css，但徽标和其他所有内容都受到影响，因为此属性适用于整个HTML代码。我该如何克服这个问题？

由于

Answer 1

您可以将背景添加到其自己的唯一元素中，并使用否定的z-index将其置于其余内容之后。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用额外的库来简化您的工作;像素材Ui这样的库会为您提供一种称为纸张的东西，它可以充当包装器，因此您可以轻松地更改它的属性和属性。

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

初学者css =＆gt;仅将属性应用于一个元素

2 个答案: