Thay đổi độ sáng của JUST nền bằng CSS

Question

Tôi muốn thay đổi độ sáng của nền của DIV mà không ảnh hưởng đến các nội dung khác trong div.

Khi tôi áp dụng bộ lọc độ sáng di chuột trên div, các yếu tố khác trong đó cũng bị ảnh hưởng. Mà tôi không muốn.

Giải pháp khác mà tôi có chỉ đơn giản là thay thế nền của div bằng ảnh đã chỉnh sửa. Nhưng điều đó yêu cầu tăng gấp đôi dung lượng lưu trữ mà tôi không thích.

Có cách nào thay đổi độ sáng của hình nền không?

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

Trên đây là một liên kết đến một fiddle với hai nỗ lực của tôi lúc tạo ra hiệu quả mong muốn. Nhưng cả hai đều có một bất lợi trong việc sử dụng nó.

Cảm ơn trước!

Answer 1

Cảm ơn tất cả sự trợ giúp. Nhưng tắt khóa học ngay sau khi tôi đăng bài này tôi đã đưa ra một ý tưởng.

Tôi sử dụng css để thay đổi toàn bộ nội dung div thành độ sáng 1.3 và tôi thay đổi độ sáng của văn bản thành 0,8 để thậm chí nó ra.

Như thế này:

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

Tôi chỉ không biết chính xác số lượng 0.7 dường như ít sáng hơn bình thường 0,8 vẻ như ít để sáng.