Question

我有一个带有背景图片的<section>标记，其中包含<h4>内的文字。我需要将它与Pinterest集成。如果我只是一个图像，我会丢失文字。有没有办法将背景图像和文本组合在一起并将其固定在“运行时”中。

Answer 1

我知道这不是你想要的，但它仍然是替代解决方案。看看ShareAsImage插件。它使您可以选择文本并在pinterest上分享。

Answer 2

也许你想在标签内创建一个内容图像并将其固定。使用html2canvas library为您生成它并将它们固定，例如：

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

您可以在他们的网站上查看示例： http://html2canvas.hertzen.com/examples.html

希望有所帮助：）

Answer 3

不完全确定您的意思，扩展您的问题，以便更容易理解您遇到的困难。

也许使用knockout.js将背景图片，文本和图钉绑定到您可以在页面上重新创建的对象。您可以使用ajax调用在运行时在事件上填写信息。

Answer 4

其实我不明白你想要完成什么。我的理解是你希望文本和图像能够在运行时产生价值吗？

以下是使用Jquery完成的。
对于服务器端，只需在h2标记内保留asp：textbox然后进行设置从服务器端。
如果您想在运行时添加背景然后只需从HTML中删除部分的CSS class，将CSS class .section-background从服务器端添加到部分标记

<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>

结合背景图像和文本并固定它

4 个答案: