AVIL13


Demo of jQuery plugin invertImgText.js

GitHub repository
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

How to use?


It's simple.
Connect this plugin to your page:

            <script src="/path/to/invertImgText.js"></script>
        

<!-- HTML -->
<div class="patt" id="patt1">
    Lorem ipsum dolor sit amet.
</div>

...
        
/* CSS */
#patt1{
    background: url('img/congruent_outline.png') 0 0 repeat;
}

...
        
AND JavaScript:
            // get background image on this block
            $('.patt').invertImgText();
        
or
            $('.patt').invertImgText('/path/to/img.jpg');
        

Text color in .patt block will be changed