CSS로 배경의 밝기를 변경하십시오.

Question

div의 다른 내용에 영향을주지 않으면 서 DIV 배경의 밝기를 변경하고 싶습니다.

div에 호버 밝기 필터를 적용하면 다른 요소도 영향을받습니다. 나는 싫어.

내가 가지고있는 다른 해결책은 간단히 div의 배경을 사진 편집 된 것으로 대체하는 것입니다. 그러나 그것은 내가 좋아하지 않는 저장 장치를 두 배로 요구합니다.

배경 이미지의 밝기 만 변경하는 방법이 있습니까? 여기에 위

JSFIDDLE

<div id="replace"> 
    <div id="transparent"> 
     <span id="text">Random unaffected text</span> 
    </div> 
</div> 

    <div id="brightnessfilter"> 
    <div id="transparent"> 
     <span id="text">Random AFFECTED text (it glows)</span> 
    </div> 
</div> 

#replace { 
width:700px; 
height:465px; 
background-image:url('http://i42.tinypic.com/351dff5.jpg'); 
} 

#brightnessfilter { 
    width:700px; 
    height:465px; 
    background-image:url('http://i42.tinypic.com/351dff5.jpg'); 
} 

#brightnessfilter:hover { 
    -webkit-filter: brightness(1.3); 
-moz-filter: brightness(1.3); 
-o-filter: brightness(1.3); 
-ms-filter: brightness(1.3); 
} 

#transparent { 
    position:relative; 
    top:400px; 
    width:700px; 
    height:65px; 
    background-color:rgba(0,0,0,.5); 
    border-radius:8px; 
} 

#text { 
    color:white; 
    font-weight:bold; 
    position:relative; 
    top:9px; 
    left:9px; 
    font-size:16px; 
} 

#replace:hover { 
    background-image:url('http://i40.tinypic.com/2cft7dl.jpg'); 
} 

는 원하는 효과를 작성에서 내 두 시도와 바이올린에 대한 링크입니다. 그러나 둘 다 사용하는 데에는 단점이 있습니다.

미리 감사드립니다.

Answer 1

모든 도움에 감사드립니다. 그러나 내가 이것을 게시 한 직후에 나는 아이디어를 얻었습니다.

전체 divs 콘텐츠를 밝기 1.3으로 변경하려면 CSS를 사용하고 텍스트 밝기를 0.8로 변경해도됩니다. 이처럼

는 :

난 그냥 잘 모릅니다

JSFIDDLE

<div id="brightnessfilter"> 
    <div id="transparent"> 
     <span id="text">Random AFFECTED text (it glows)</span> 
    </div> 
</div> 

#brightnessfilter { 
    width:700px; 
    height:465px; 
    background-image:url('http://i42.tinypic.com/351dff5.jpg'); 

} 

#brightnessfilter:hover { 
    -webkit-filter: brightness(1.3); 
-moz-filter: brightness(1.3); 
-o-filter: brightness(1.3); 
-ms-filter: brightness(1.3); 
} 

#brightnessfilter:hover #text { 
    -webkit-filter: brightness(0.8); 
-moz-filter: brightness(0.8); 
-o-filter: brightness(0.8); 
-ms-filter: brightness(0.8); 
} 

#transparent { 
    position:relative; 
    top:400px; 
    width:700px; 
    height:65px; 
    background-color:rgba(0,0,0,.5); 
    border-radius:8px; 
} 

#text { 
    color:white; 
    font-weight:bold; 
    position:relative; 
    top:9px; 
    left:9px; 
    font-size:16px; 
} 

정확한 숫자 0.7는 0.8이 조금 밝은 것 같다 평소보다 어둡게 보인다.