4

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

4

4 回答 4

2

我知道这不是您正在寻找的东西，但它仍然可以作为替代解决方案。看看ShareAsImage插件。它使您可以选择文本并在 pinterest 上共享。

于 2013-09-24T00:30:49.553 回答
1

也许您想在标签内创建内容图像并将其固定。使用html2canvas 库为您生成它，然后将其固定，例如：

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

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

希望能帮助到你 ：）

于 2013-09-27T09:26:14.700 回答
0

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

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

于 2013-09-26T17:58:51.913 回答
0

其实我不明白你想要完成什么。我的理解是，您希望 Text 和 Image 结合在一起并在运行时赋予价值？

  • 下面是使用 Jquery 完成的。
  • 对于服务器端，只需将 asp:textbox 保留在 h2 标记内，然后从服务器端设置它。
  • 如果你想在运行时添加背景，那么只需CSS class从 HTML中删除部分，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>
于 2013-09-27T13:50:13.663 回答