I have an image in the background of my site and I would like to apply the filter brightness to the whole image except for one part as shown in the image:
Any tips on how to do this? I've tried tag map , but it only serves to mark sectors of the image, without the possibility of changing style .
Why not add two <div> with opacity over the image?
<style>
div{
position:absolute;
top:0px;
left:0px;
height: 300px;
width: 400px;
}
#imagem{
background-image: url('http://assets.dornob.com/wp-content/uploads/2009/08/dining-room-desk-table.jpg');
}
.transparencia{
background-color: #fff;
opacity: 0.8;
filter: alpha(opacity=50);
}
.quadro1{
top:0px;
height:60px;
}
.quadro2{
top:140px;
height:160px;
}
</style>
<div id="imagem" />
<div class="transparencia quadro1" ></div>
<div class="transparencia quadro2"></div> To solve this problem, and using the brightness filter, we can use the clip property:
The clip property allows you to specify a rectangle to cut an element absolutely positioned. The rectangle is specified as four coordinates, all from the upper left of the element to be cut.
As I did not read the question right, I did the inverse that you asked for, ie, the filter range has brightness :
.brightness div{
position:absolute;
overflow:hidden;
}
#filter img{
-webkit-filter:brightness(200%);
filter:brightness(200%);
}
#filter{
position:absolute;
clip: rect(30px, auto, 90px, auto);
/* (top, right, bottom, left) */
}<div class="brightness">
<div id="original">
<img src="https://image.freepik.com/fotos-gratis/laptop-na-mesa-do-escritorio_426-19315253.jpg"></div><divid="filter">
<img src="https://image.freepik.com/fotos-gratis/laptop-na-mesa-do-escritorio_426-19315253.jpg"></div></div>I'vedonewhatyouwanttodo:
.brightness div{
position:absolute;
overflow:hidden;
}
#noFilter{
position:absolute;
clip: rect(30px, auto, 90px, auto);
/* (top, right, bottom, left) */
}
#original img{
-webkit-filter:brightness(200%);
filter:brightness(200%);
}<div class="brightness">
<div id="original">
<img src="https://image.freepik.com/fotos-gratis/laptop-na-mesa-do-escritorio_426-19315253.jpg"></div><divid="noFilter">
<img src="https://image.freepik.com/fotos-gratis/laptop-na-mesa-do-escritorio_426-19315253.jpg">
</div>
</div>