0

Twitter ブートストラップのカルーセル サンプルで、container marketingimg とfeaturetteimg がオンザフライで生成されるのを見ました。

私はcss、javascript、およびTwitterのブートストラップに不慣れです。誰かこれを説明してもらえますか? 変更して自分のイメージを生成できるように、どのように行われたかを知りたいです。ありがとう!

ここに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 には依存しません。実際には、文字形式でエンコードされた画像のデータにすぎません。

このimage to data uri converterのようなさまざまなオンライン ツールを使用して生成できます。

それらを使用する利点は、非常に小さな画像を HTML にインライン化できることです。これにより、ブラウザが余分な HTTP リクエストを作成するのを防ぐことができます。また、HTML が適切にキャッシュされている場合は、問題を解決することもできます。短所もあることに注意してください。たとえば、大きな画像ではかなり非効率的です。

于 2013-08-06T16:44:57.090 に答える
1

これは単なる Data-URI 画像です: 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 に答える