beginner css => 仅将属性应用于一个元素

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>

How can I add brightness to my background image, without impacting logo.png ?

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

谢谢

Answer 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">

Answer 2

您可以使用其他库来简化您的工作；像 material Ui 这样的库为您提供了一种叫做 paper 的东西，它充当包装器，因此您可以更改属性和它的属性很容易。

正如上面所说的改变 z-index: -1 是一个很好的起点。

beginner css => 仅将属性应用于一个元素

beginner css => apply property to only one element

html

css

frontend

responsive-design

web

beginner css => 仅将 属性 应用于一个元素

beginner css => apply property to only one element

html

css

frontend

responsive-design

web

beginner css => 仅将属性应用于一个元素