CSS filter applied to all elements of my webpage

Question

I put a button centered in my page but the css filter that i have write for html tag is also applied to my button. How an i avoid that ?

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

not sure if you can, see this http://stackoverflow.com/questions/22584671/make-a-parent-div-webkit-filter-not-affect-children — Key, Jul 08 '14 at 13:32
I would suggest rather giving a filter property to `html` element create a container div and then give a property to that div. — Kheema Pandey, Jul 08 '14 at 13:40
That would still be an issue for any parent of the button with the same property. — Paulie_D, Jul 08 '14 at 13:41
@KheemaPandey That is definitely a good thing to do regarding semantics, you should never explicitly style your html element. That said, moving the filter to the body tag, or any other container div will not solve the issue. — Michael, Jul 08 '14 at 13:41

score 2 · Answer 1 · answered Jul 08 '14 at 13:39

Applying it to the HTML tag will apply this style globally across anything else your HTML will contain. As a general rule of thumb, you should never style your HTML tag explicitly. That's not its intention.

Any elements inside the parent element where the filter is applied will also be affected.

score 1 · Accepted Answer · answered Jul 08 '14 at 14:02

I have applied the technique below to a single div but it can be extended to the page as a whole.

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;

}

score 0 · Answer 3 · answered Jul 08 '14 at 13:47

0

just edit your background picture with a 0.5 opacity on photoshop, leave the html tag alone and set that image as your body background picture

answered Jul 08 '14 at 13:47

valerio0999

11,458
7
28
56

score 0 · Answer 4 · answered Jul 08 '14 at 13:54

<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 filter applied to all elements of my webpage

4 Answers4