search

kennethcachia / background-check

Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.
http://kennethcachia.com/background-check/
MIT License
3.27k stars 281 forks source link

Flip the control? #33

Closed parterburn closed 10 years ago

parterburn commented 10 years ago

Would it be possible to use this as a way to change the background depending on what the image sitting on top of it is?

The use case here is that we have an app at https://brandfolder.com/brandfolder and it would be nice if this could detect if the logo uploaded was lighter to show a dark background.

kennethcachia commented 10 years ago

Interesting. Let's assume we have the following HTML and CSS:

<div class="wrapper">
  <img src=".."/>
</div>
.wrapper {
  width: 200px;
  height: 200px;
}

.wrapper.background--light {
  background: .. ;
}

img {
  width: 100%;
}

The following should add a class to .wrapper:

BackgroundCheck.init({
  targets: '.wrapper',
  images: 'img',
  minOverlap: 0
});

BackgroundCheck will add .background--light to .wrapper when a lighter image is uploaded as it's assuming that the target is currently on top of a light image.

Let me know if it works!