background-check

Changer la couleur en fonction de l’arrière-plan

Pro­jet Github

Back­ground­Check

Auto­ma­ti­cally switch to a dar­ker or a ligh­ter ver­sion of an ele­ment depen­ding on the bright­ness of images behind it.

Examples

Using Back­ground­Check with other plugins

How it works

If an ele­ment over­laps any of the images, either .background--dark or .background--light is added to it. Back­ground­Check does not change an element’s style — you must do so using CSS.

For example, if <p> has the fol­lo­wing default style:

p {
  color: white;
}

you can then add the following:

p.background--light {
  color: black;
}

Classes are only added if the ele­ment over­laps an image. An ele­ment is consi­de­red to over­lap an image if at least 50% (confi­gu­rable) of it’s area is cove­ring that image.

Com­plex backgrounds

The light and dark classes work well with simple back­grounds, but you might require an addi­tio­nal level of control for ela­bo­rate back­grounds. Back­ground­Check adds .background--complex to an ele­ment if its back­ground exceeds a cer­tain level of complexity.

This class can be used as an inter­me­diate state:

p.background--light {
  color: black;
}

p.background--dark {
  color: white;
}

p.background--complex {
  color: gray;
}

or:

p.background--dark.background--complex {
  color: #ccc;
}

p.background--light.background--complex {
  color: #aaa;
}

How to use

Ini­tia­lize

// Check all elements with a .target class against all images on a page
BackgroundCheck.init({
  targets: '.target'
});

// Specific images
BackgroundCheck.init({
  targets: '.target',
  images: '.thumbnails'
});

Repro­cess

// All targets
BackgroundCheck.refresh();

// Specific target
BackgroundCheck.refresh(target);

Set­ters and getters

// Get current targets
BackgroundCheck.get('targets');

// Change targets
BackgroundCheck.set('targets', '.header');

Stop

BackgroundCheck.destroy();

Attri­butes

Used with .init(), .set() or .get()

  • tar­gets: Ele­ments to be pro­ces­sed. Type: String, Ele­ment or Node­list. Requi­red.
  • images: Images to be used. Type: String, Ele­ment or Node­List. Default: All images on page.
  • chan­ge­Parent: Deter­mines if classes are added to a tar­get or to its parent. Default: false.
  • thre­shold: Mid­point bet­ween dark and light. Default: 50 (%).
  • min­Com­plexity: Mini­mum image com­plexity requi­red before the com­plex class is added to a tar­get. Default: 30 (%).
  • minO­ver­lap: Mini­mum over­lap requi­red bet­ween an ele­ment and any of the images for that ele­ment to be pro­ces­sed. Default: 50 (%).
  • classes: Classes added to tar­gets. Default: { dark: 'background--dark', light: 'background--light', complex: 'background--complex' }
  • win­do­wE­vents: Repro­cess on win­dow resize and scroll. Default: true.
  • max­Du­ra­tion: Maxi­mum pro­ces­sing time allo­wed. Killed if it takes lon­ger. Default: 500 (ms).
  • mask: Used inter­nally when che­cking if an ele­ment over­laps any of the images. Default: { r: 0, g: 255, b: 0 }
  • debug: Enable or disable logs. Default: false.

CSS Back­grounds

Back­ground­Check can also be used on an ele­ment that has a background-image. For example:

.thumbnail {
  background-image: url(image.jpg);
}
BackgroundCheck.init({
  targets: '.target',
  images: '.thumbnail'
});

Back­ground Posi­tion and Size

Tes­ted with the fol­lo­wing units:

  • background-size: cover, contain, auto, inhe­rit, cm, em, px and %
  • background-position: top, left, cen­ter, right, bot­tom, inhe­rit, cm, em, px and %

Cur­rent Limitations

  • background-repeat is not sup­por­ted and is for­ced to no-repeat
  • background-origin is for­ced to padding-box
  • Mul­tiple back­grounds are not supported
  • Four-value syn­tax can be used if the brow­ser sup­ports it

Brow­ser Support

Tes­ted on IE 9-11, iOS 6/7 and the latest ver­sions of Chrome, Fire­fox and Safari.

Télé­char­ger le code

Adap­tive backgrounds

Capture-adaptative-bgn

Demo

Télé­char­ger

0