我在我的页面中放置了一个按钮，但我为 html 标记编写的 css 过滤器也应用于我的按钮。我如何避免这种情况？
HTML
<body>
<div class="button">
<a href="#">START EXPERIENCE</a>
</div>
</body>
CSS
html {
background: url(../img/cover2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-filter: brightness(0.5);
filter: brightness(0.5);
// Browser Specific
-moz-filter: brightness(0.5);
-o-filter: brightness(0.5);
-ms-filter: brightness(0.5);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.button {
position: absolute;
left: 40%;
top: 50%;
-webkit-filter: none;
}
.button a {
text-decoration: none;
border: 2px white solid;
color: white;
padding: 25px;
padding-left: 100px;
padding-right: 100px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 0px;
text-transform: uppercase;
font-weight: bold;
font-size: 22px;
}
.button a:hover {
background: white;
color: black;
color: rgba(0, 0, 0, 0.5);
}
最佳答案
将它应用到 HTML 标记将在您的 HTML 将包含的所有其他内容中全局应用此样式。作为一般经验法则，您应该永远不要明确设置 HTML 标记的样式。这不是它的意图。
应用过滤器的父元素内的任何元素也会受到影响。
关于html - 应用于我网页所有元素的 CSS 过滤器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24633070/