0

我在 twitter bootstrap 的轮播示例中看到container marketingimg 和featuretteimg 是动态生成的。

我是css、javascript和twitter bootstrap的新手，谁能解释一下？我很想知道它是如何完成的，以便我可以更改它以生成我自己的图像，谢谢！

这是javascript（我想是的..它在holder.js）：

var settings = {
    domain: "holder.js",
    images: "img",
    bgnodes: ".holderjs",
    themes: {
        "gray": {
            background: "#eee",
            foreground: "#aaa",
            size: 12
        },
        "social": {
            background: "#3a5a97",
            foreground: "#fff",
            size: 12
        },
        "industrial": {
            background: "#434A52",
            foreground: "#C2F200",
            size: 12
        }
    },
    stylesheet: ".holderjs-fluid {font-size:16px;font-weight:bold;text-align:center;font-family:sans-serif;margin:0}"
};

这是html部分：

  <div class="featurette">
    <img class="featurette-image img-circle pull-right" data-src="holder.js/512x512">
    <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
    <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
  </div>

查看图像时，其地址如下所示：

data:image/png;base64,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gEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAgkAAAgkAAAgkAAAgEACAAACCQAACCQAACCQAACAQAIAAAIJAAAIJAAAIJAAAIBAAgAAAv0PnVh7b3swf+IAAAAASUVORK5CYII=

编辑：

谢谢大家，解答！！正是由于您的所有回答，我才发现图像是从主题生成的：{ ... } in var settings

4

2 回答 2

1

您正在处理图像数据 URI，它们基本上只是文本格式的图像，它们不依赖于 CSS 或 JavaScript；它实际上只是以字符格式编码的图像数据。

您可以使用各种在线工具生成它们，例如此图像到数据 uri 转换器。

使用它们的好处是可以将非常小的图像内联到 HTML，从而使浏览器免于发出无关的 HTTP 请求，并且如果您的 HTML 被很好地缓存，那么它也是一个痛苦的解决方案。请记住，它们也有其缺点：例如，它们对于大图像来说效率很低。

于 2013-08-06T16:44:57.090 回答
1

这只是 Data-URIs 图像：https ://developer.mozilla.org/en-US/docs/data_URIs

它们是直接以 URL 格式编码的图像，因此您无需从服务器请求它们。

您可以在此站点上测试将图像编译为 data-uri：http: //dataurl.net/#dataurlmaker

Sass 和 Compass 也有一个助手可以直接在样式表源 ( http://compass-style.org/reference/compass/helpers/inline-data/ ) 中利用编码。

于 2013-08-06T16:45:35.523 回答