All geek questions in one place

Combine the background image and text and attach it

I have a <section> with a background image and containing text inside <h4> . I need to integrate it with Pinterest. If I attach only the image, I will lose the text. Is there a way to combine the background image and text and output it to "runtime".

+4
source share
4 answers

I know that this is not exactly what you are looking for, but still it may be an alternative solution. Check out the ShareAsImage plugin. It allows you to select text and share it by pinterest.

+2
source

perhaps you want to create an image of the content inside the tag and pin it. Use the html2canvas library to generate it for you and for them you link it, for example:

 html2canvas($('div section'), { onrendered: function (canvas) { // pinIt(canvas); } })

you can see examples here on your website: http://html2canvas.hertzen.com/examples.html

Hope this helps :)

+1
source

Not quite sure what you mean, expand your question to make it easier to understand what you are facing.

Perhaps use knockout.js to bind the background image, text and contact to an object that you can recreate on the page. You can use the ajax call to populate information during the execution of an event.

0
source

Actually, I don’t understand what you want to achieve. My understanding is that you want the text and image to be more accurate and put the value at runtime?

  • JQuery is executed below.
  • For the server side, just save asp: textbox inside the h2 tag, and then install it from the server.
  • If you want to add reverse at run time then simply remove the CSS class section from the HTML add CSS class .section-background with serveride on the section tag
 <head> <title></title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script src="Scripts/jquery-2.0.3.min.js"></script> <style> .section-background { background: url('Background.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } </style> <script> $(document).ready(function () { $("h2").text('abc'); }); </script> </head> <body> <section class="section-background" > <h2></h2> </section> </body>
0
source

Source: https://habr.com/ru/post/1502515/

More articles:


All Articles