Question

我在页面中放置了一个按钮，但我为html标签编写的css过滤器也应用于我的按钮。我如何避免这种情况？

enter image description here

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

Answer 1

将其应用于HTML标记会将此样式全局应用于HTML将包含的任何其他内容。作为一般经验法则，您应该永远显式设置HTML标记的样式。这不是它的意图。

应用过滤器的父元素内的任何元素也会受到影响。

Answer 2

我已将下面的技术应用于单个div，但它可以扩展到整个页面。

Codepen Demo

<强> HTML

<div class="wrapper">
  <img src="http://lorempixel.com/400/400/sports/1/" alt="" />
    <div class="button">Some Text</div>
</div>

<强> CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.wrapper {
    width:400px;
  height:400px;
  margin:25px auto;
  position: relative;
}

.wrapper img {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  -webkit-filter: brightness(0.5);
  // Browser Specific
  -moz-filter: brightness(0.5);
  -o-filter: brightness(0.5);
  -ms-filter: brightness(0.5);
    filter: brightness(0.5);
}

.button {
  position: absolute;
  top:50%;
  left:50%;
  -wekbit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  color:black;
  font-weight: bold;
  border:1px solid white;
  padding:1em;
  background-image: url(http://lorempixel.com/400/400/sports/1/);
  background-position: center center;

}

Answer 3

在photoshop上使用0.5不透明度编辑背景图片，单独留下html标记，并将该图片设置为body背景图片

Answer 4

<body>
    <i class="shadow"></i>
    <div class="button">
        <a href="#">START EXPERIENCE</a>
</div>
</body>

css

body {
  background: url(http://www.hdwallpapers.in/walls/cute_baby_in_autumn-wide.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.shadow{
  position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: rgba(255, 0, 0, 0.5);
  -webkit-filter: brightness(0.5);
  filter: brightness(0.5);
  -moz-filter: brightness(0.5);
  -o-filter: brightness(0.5);
  -ms-filter: brightness(0.5);
}

.button {
    position: absolute;
    left: 20%;
    top: 50%;
    z-index:2;
}

.button a {
    text-decoration: none;
    border: 2px solid white;
    color: white;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 100px;
    padding-right: 100px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 0;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 22px;
    text-align:center;
    white-space:nowrap;
}

.button a:hover {
    background: white;
    color: black;
    color: rgba(0, 0, 0, 0.5);
}

CSS过滤器应用于我的网页的所有元素

4 个答案: