Show Image Under Text with jQuery and CSS3 - TextHoler.js
File Size: | 396 KB |
---|---|
Views Total: | 1551 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
TextHoler.js is a jQuery plugin which uses CSS3 background-clip property to use an image as the background of your text. Works in Chrome & Safari, not Firefox. To solve that you could use an SVG insted of pure text.
See also:
How to use it:
1. Include jQuery JavaScript library and the jQuery textholer.js on your web page.
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script> <script src="js/textHoler.js"></script>
2. Wrap your text into an inline block element.
<span id="demo">TEXT HOLER</span>
3. Call the plugin and specify the image source for the text background.
$('#demo').textHoler({ background: "1.jpg" });
4. Available options.
$('#demo').textHoler({ // background color color: "transparent", // font size size: "48px", // font family family: "arial", // background-repeat repeat: "repeat", // font weight weight: 700 });
This awesome jQuery plugin is developed by diegodalbosco. For more Advanced Usages, please check the demo page or visit the official website.