내 웹 페이지의 모든 요소에 CSS 필터 적용

버튼을 내 페이지의 가운데에 배치했지만 html 태그 용으로 작성한 CSS 필터가 내 버튼에도 적용됩니다. 내가 어떻게 피하니? 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); 
}

출처

2014-07-08 wawanopoulos

확실하지 http://stackoverflow.com/questions/22584671/make- a-parent-div-webkit-filter-not-affect-children – Key

오히려 필터 p를 제공하는 것이 좋습니다. roperty를'html' 요소에 추가하면 컨테이너 div가 생성되고 해당 div에 속성이 부여됩니다. –

동일한 속성을 가진 단추의 부모에게는 여전히 문제가됩니다. –

나는 기술을 적용했습니다 아래 하나의 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; 

}

출처

2014-07-08 14:02:29

은 HTML이 포함됩니다 무엇을 통해 전 세계적으로이 스타일을 적용합니다. 대략적으로, 절대 HTML 태그를 명시 적으로 스타일링해야합니다. 그것은 그 의도가 아닙니다.

필터가 적용된 상위 요소 내부의 요소도 영향을받습니다.

이

출처

2014-07-08 13:39:15

단지 포토샵에 0.5 불투명도와 배경 사진을 편집, 혼자 html 태그를 떠나 당신의 body 배경 그림으로 그 이미지를 설정

출처

2014-07-08 13:47:24 valerio0999

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

출처

2014-07-08 13:54:22 AvrilAlejandro

내 웹 페이지의 모든 요소에 CSS 필터 적용

답변

관련 문제