自分のページのGoogleの画像ソースファイルには、1つのソースに多数の画像が含まれている可能性があることがわかりましたが、特定の位置に1つだけ表示されます。例えば、「https://www.google.co.uk/images/nav_logo242.png」 は、Googleの結果ページ用の1つのイメージソースファイルですが、そのソースの特定の部分を選択してウェブページの一部に表示します。複数の画像がソースファイルにある場合、ソースファイルから特定の画像を選択する方法は？
これを何とか複製したいのですが、これがどのように達成されたのかわかりません。
私は一度に1つのイメージを使用し、すべてを表示するとき、イメージソースを使用する方法しか知りません。
私を助けることができる人に事前に感謝！
これらはスプライトと呼ばれ、あなたはそれらを使用する方法を見つけるために、このリンクをチェックアウトすることができます：http://www.w3schools.com/css/css_image_sprites.asp
これらはCSS-スプライトです。
CSS-Spriteの基本的な詳細ここでは、1つのイメージは多くのイメージで構成されます。 スプライトを使用すると、不要な帯域幅の使用が減少します。
個々の画像の背景位置にアクセスするにはCSSプロパティは主な役割を果たします。
このタイプのイメージはスプライトと呼ばれます。イメージを要素の背景として配置し、cssを使用してその背景を配置し、表示したいものだけを表示します。
ここでは、その使用例を示します。最初の例ではdivを使用しています。 2番目の例では、より大きな要素に配置するために擬似要素を使用しているため、画像の他の部分の滲みはありません。
.google, .camera::before {
background: transparent url(https://www.google.co.uk/images/nav_logo242.png) left top no-repeat;
}
.google {
width: 120px;
height: 40px;
background-position: -22px 2px;
border: 1px solid red;
}
.camera {
position: relative;
padding-left: 30px;
font-size: 1.5rem;
}
.camera::before {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 20px;
height: 20px;
background-position: -40px -131px;
}
.camera:hover::before {
background-position: -60px -131px;
}<div class="google"></div>
<p class="camera">
Hover over me.
</p>これをお寄せいただきありがとうございます。 –
あなたは何を達成しようとしていますか？質問で試した 'html'、' css'、 'javascript'を含めることができますか？ – guest271314
これは、htmlとcssを使用してGoogleの結果ページを再作成する必要があるプロジェクトです。レクリエーションで使用するイメージを取得しているうちに、多くのイメージが1つのソースファイルにまとめられていますが、ページに関連するイメージを表示できることに気付きました。私はまだ初心者で、1つの画像が含まれている画像ソースにしか遭遇していないので、私は迷っています。だから私はまだこれを行うためのコードを書いていない、私はちょうど私が欲しいビットを取るためにイメージエディタを使用する私のプロジェクトのように。ソースから個別に保存することができます。 –
私は、Googleがこれらの画像を1つのソースファイルにバンドルする方法と理由について興味があり、それを効果的に使用できるかどうかは不思議です。 –