0
私は解決方法を見つけることができませんが、私はコンテナの背景としてスプライトを作成する必要がある問題があります。背景としてCSSのスプライトを繰り返す方法
問題は、私がそれを作る方法を見つけ出すことができない、私はこれについての検索がありますが、私はこれを解決するために何かを見つけることができませんでした。
私は何を得るだけでは、画像全体が毎回それを繰り返すで、これまで= 288px
のx = 144px y座標にバックグラウンドスタートとして使用するスプライト。
.main {
background: url("http://i.imgur.com/lfC2Pus.png");
background-position: -144px -288px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum beatae corrupti minus consequuntur, facere cupiditate deserunt maxime id non nihil praesentium voluptas at ea similique nemo nobis recusandae soluta vitae voluptatibus quisquam. Impedit sapiente non aut, voluptates assumenda fugit soluta labore ut nulla natus, reiciendis hic laborum beatae blanditiis facilis officiis est iste. Tempora cumque voluptatem enim voluptatibus asperiores, minima tempore quidem reiciendis explicabo sapiente quae inventore ipsa. Distinctio officia dicta quos nihil eum quisquam, ipsum odio deserunt quam non perferendis eos, obcaecati illo vero iure dignissimos velit. Velit ipsam corporis, officiis quas unde facere id tempora minima beatae, dicta, magni sed quaerat architecto, animi a eum veritatis. Iste veniam suscipit quam molestiae cupiditate magni ex error minus, ut maiores! Deleniti numquam, voluptatibus incidunt! Perspiciatis laudantium facere ullam quibusdam velit sed eos, reiciendis enim vitae veniam temporibus nulla repudiandae commodi, expedita cumque eligendi. Laboriosam voluptatem, in praesentium atque at, soluta. Magni sunt tempore tenetur, ullam nihil labore repellat nulla ad voluptates doloremque suscipit veniam architecto quod eius eveniet omnis facilis libero officiis, animi sequi placeat repellendus dicta, enim dolorum numquam. Velit dicta vitae, maxime ipsa facilis impedit dignissimos distinctio voluptatibus modi, deleniti necessitatibus exercitationem, earum porro. Illum, provident deserunt pariatur.</p>
<p>Id, autem? Officiis nesciunt eaque dolorum, omnis, voluptatum sit voluptas aspernatur delectus tempora explicabo cum ipsa eum aperiam veritatis nam sapiente, illum. Quos voluptatem quod illo, quas tenetur excepturi ea reiciendis dolore voluptatum? Similique reprehenderit ea laboriosam. Reprehenderit nemo velit suscipit consequatur esse, voluptate itaque vel eveniet alias placeat mollitia dolorem quibusdam adipisci repellat voluptatem neque, numquam quam! Recusandae temporibus asperiores aut odit, eum quam consectetur aspernatur saepe earum impedit, alias quae consequatur tempore labore facilis doloribus ut adipisci magni. Cum est harum quibusdam veritatis aspernatur esse iusto inventore a asperiores rem, facilis vel expedita quaerat magni vero id neque. Dolorum assumenda amet incidunt molestias perferendis a dolore distinctio dignissimos esse quam ipsam debitis fugit, ipsa, officia sed, facilis, cum quibusdam tenetur quas? Officiis nihil libero expedita odio doloremque, beatae, praesentium voluptatem provident amet fugit dicta aliquid. Esse consequuntur labore et beatae cum maiores, itaque ducimus atque, rerum, inventore laboriosam nobis illo, non facilis quisquam sunt provident cumque nemo. Debitis odit reprehenderit officia recusandae, deserunt, id impedit, distinctio incidunt nemo non est velit eaque nulla tempore repellendus sed quod facere. Nostrum non, atque, suscipit incidunt placeat aspernatur impedit, earum nemo quidem molestiae dolore. Nemo totam id eos ab maxime minima.</p>
<p>Cum veniam, provident culpa enim eum magni ut maxime quae sint earum beatae minus delectus dolorum pariatur cupiditate voluptas aperiam, libero magnam. Nostrum ea architecto deleniti illo quibusdam quisquam, alias harum, ducimus possimus molestias perspiciatis dolorum nemo, blanditiis cupiditate exercitationem corporis ab eligendi sit itaque nihil laboriosam quos saepe quas? Commodi id dolorem debitis consequuntur nihil voluptates culpa temporibus iusto eligendi! Maxime quidem cupiditate quam corrupti blanditiis exercitationem dolore distinctio fugiat temporibus quas quibusdam totam quos eligendi et necessitatibus, dolor inventore culpa eveniet odit obcaecati mollitia modi? Sequi, quia, tenetur. Est pariatur minima adipisci, minus, culpa sit consequatur, fugit aperiam sint amet voluptatibus hic! Nesciunt cumque voluptate, velit saepe sunt numquam quam repellat accusamus in. Voluptas quod tempora omnis nobis quibusdam architecto, delectus quaerat nulla velit expedita error cumque distinctio non magnam repellat, odit laudantium similique voluptatibus totam, unde, voluptatum laboriosam. Qui repudiandae velit fugiat doloribus alias vero ipsa maxime voluptas saepe quis non laborum quae voluptates et minima nihil architecto earum, vel nemo maiores reiciendis! Autem velit vitae alias dolores saepe fugit sequi molestias, aspernatur quo delectus doloremque nihil obcaecati asperiores amet, id omnis ullam neque. Earum sed dicta perspiciatis, consectetur incidunt voluptatibus vel, omnis minus odit, aliquam nulla.</p>
</div>
</body>
</html>基本的に私は何をしたい、私は以下ここに投稿するものであるが、代わりに画像を使用して、私は画像内の特定のスプライトを使用します。
.main {
background: url("http://i.imgur.com/2OqgNaO.png");
/* background: url("http://i.imgur.com/lfC2Pus.png"); */
/* background-position: -144px -288px; */
color: white;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum beatae corrupti minus consequuntur, facere cupiditate deserunt maxime id non nihil praesentium voluptas at ea similique nemo nobis recusandae soluta vitae voluptatibus quisquam. Impedit sapiente non aut, voluptates assumenda fugit soluta labore ut nulla natus, reiciendis hic laborum beatae blanditiis facilis officiis est iste. Tempora cumque voluptatem enim voluptatibus asperiores, minima tempore quidem reiciendis explicabo sapiente quae inventore ipsa. Distinctio officia dicta quos nihil eum quisquam, ipsum odio deserunt quam non perferendis eos, obcaecati illo vero iure dignissimos velit. Velit ipsam corporis, officiis quas unde facere id tempora minima beatae, dicta, magni sed quaerat architecto, animi a eum veritatis. Iste veniam suscipit quam molestiae cupiditate magni ex error minus, ut maiores! Deleniti numquam, voluptatibus incidunt! Perspiciatis laudantium facere ullam quibusdam velit sed eos, reiciendis enim vitae veniam temporibus nulla repudiandae commodi, expedita cumque eligendi. Laboriosam voluptatem, in praesentium atque at, soluta. Magni sunt tempore tenetur, ullam nihil labore repellat nulla ad voluptates doloremque suscipit veniam architecto quod eius eveniet omnis facilis libero officiis, animi sequi placeat repellendus dicta, enim dolorum numquam. Velit dicta vitae, maxime ipsa facilis impedit dignissimos distinctio voluptatibus modi, deleniti necessitatibus exercitationem, earum porro. Illum, provident deserunt pariatur.</p>
<p>Id, autem? Officiis nesciunt eaque dolorum, omnis, voluptatum sit voluptas aspernatur delectus tempora explicabo cum ipsa eum aperiam veritatis nam sapiente, illum. Quos voluptatem quod illo, quas tenetur excepturi ea reiciendis dolore voluptatum? Similique reprehenderit ea laboriosam. Reprehenderit nemo velit suscipit consequatur esse, voluptate itaque vel eveniet alias placeat mollitia dolorem quibusdam adipisci repellat voluptatem neque, numquam quam! Recusandae temporibus asperiores aut odit, eum quam consectetur aspernatur saepe earum impedit, alias quae consequatur tempore labore facilis doloribus ut adipisci magni. Cum est harum quibusdam veritatis aspernatur esse iusto inventore a asperiores rem, facilis vel expedita quaerat magni vero id neque. Dolorum assumenda amet incidunt molestias perferendis a dolore distinctio dignissimos esse quam ipsam debitis fugit, ipsa, officia sed, facilis, cum quibusdam tenetur quas? Officiis nihil libero expedita odio doloremque, beatae, praesentium voluptatem provident amet fugit dicta aliquid. Esse consequuntur labore et beatae cum maiores, itaque ducimus atque, rerum, inventore laboriosam nobis illo, non facilis quisquam sunt provident cumque nemo. Debitis odit reprehenderit officia recusandae, deserunt, id impedit, distinctio incidunt nemo non est velit eaque nulla tempore repellendus sed quod facere. Nostrum non, atque, suscipit incidunt placeat aspernatur impedit, earum nemo quidem molestiae dolore. Nemo totam id eos ab maxime minima.</p>
<p>Cum veniam, provident culpa enim eum magni ut maxime quae sint earum beatae minus delectus dolorum pariatur cupiditate voluptas aperiam, libero magnam. Nostrum ea architecto deleniti illo quibusdam quisquam, alias harum, ducimus possimus molestias perspiciatis dolorum nemo, blanditiis cupiditate exercitationem corporis ab eligendi sit itaque nihil laboriosam quos saepe quas? Commodi id dolorem debitis consequuntur nihil voluptates culpa temporibus iusto eligendi! Maxime quidem cupiditate quam corrupti blanditiis exercitationem dolore distinctio fugiat temporibus quas quibusdam totam quos eligendi et necessitatibus, dolor inventore culpa eveniet odit obcaecati mollitia modi? Sequi, quia, tenetur. Est pariatur minima adipisci, minus, culpa sit consequatur, fugit aperiam sint amet voluptatibus hic! Nesciunt cumque voluptate, velit saepe sunt numquam quam repellat accusamus in. Voluptas quod tempora omnis nobis quibusdam architecto, delectus quaerat nulla velit expedita error cumque distinctio non magnam repellat, odit laudantium similique voluptatibus totam, unde, voluptatum laboriosam. Qui repudiandae velit fugiat doloribus alias vero ipsa maxime voluptas saepe quis non laborum quae voluptates et minima nihil architecto earum, vel nemo maiores reiciendis! Autem velit vitae alias dolores saepe fugit sequi molestias, aspernatur quo delectus doloremque nihil obcaecati asperiores amet, id omnis ullam neque. Earum sed dicta perspiciatis, consectetur incidunt voluptatibus vel, omnis minus odit, aliquam nulla.</p>
</div>
</body>
</html>.main {
background: url("http://i.imgur.com/lfC2Pus.png");
background-position: -144px -288px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum beatae corrupti minus consequuntur, facere cupiditate deserunt maxime id non nihil praesentium voluptas at ea similique nemo nobis recusandae soluta vitae voluptatibus quisquam. Impedit sapiente non aut, voluptates assumenda fugit soluta labore ut nulla natus, reiciendis hic laborum beatae blanditiis facilis officiis est iste. Tempora cumque voluptatem enim voluptatibus asperiores, minima tempore quidem reiciendis explicabo sapiente quae inventore ipsa. Distinctio officia dicta quos nihil eum quisquam, ipsum odio deserunt quam non perferendis eos, obcaecati illo vero iure dignissimos velit. Velit ipsam corporis, officiis quas unde facere id tempora minima beatae, dicta, magni sed quaerat architecto, animi a eum veritatis. Iste veniam suscipit quam molestiae cupiditate magni ex error minus, ut maiores! Deleniti numquam, voluptatibus incidunt! Perspiciatis laudantium facere ullam quibusdam velit sed eos, reiciendis enim vitae veniam temporibus nulla repudiandae commodi, expedita cumque eligendi. Laboriosam voluptatem, in praesentium atque at, soluta. Magni sunt tempore tenetur, ullam nihil labore repellat nulla ad voluptates doloremque suscipit veniam architecto quod eius eveniet omnis facilis libero officiis, animi sequi placeat repellendus dicta, enim dolorum numquam. Velit dicta vitae, maxime ipsa facilis impedit dignissimos distinctio voluptatibus modi, deleniti necessitatibus exercitationem, earum porro. Illum, provident deserunt pariatur.</p>
<p>Id, autem? Officiis nesciunt eaque dolorum, omnis, voluptatum sit voluptas aspernatur delectus tempora explicabo cum ipsa eum aperiam veritatis nam sapiente, illum. Quos voluptatem quod illo, quas tenetur excepturi ea reiciendis dolore voluptatum? Similique reprehenderit ea laboriosam. Reprehenderit nemo velit suscipit consequatur esse, voluptate itaque vel eveniet alias placeat mollitia dolorem quibusdam adipisci repellat voluptatem neque, numquam quam! Recusandae temporibus asperiores aut odit, eum quam consectetur aspernatur saepe earum impedit, alias quae consequatur tempore labore facilis doloribus ut adipisci magni. Cum est harum quibusdam veritatis aspernatur esse iusto inventore a asperiores rem, facilis vel expedita quaerat magni vero id neque. Dolorum assumenda amet incidunt molestias perferendis a dolore distinctio dignissimos esse quam ipsam debitis fugit, ipsa, officia sed, facilis, cum quibusdam tenetur quas? Officiis nihil libero expedita odio doloremque, beatae, praesentium voluptatem provident amet fugit dicta aliquid. Esse consequuntur labore et beatae cum maiores, itaque ducimus atque, rerum, inventore laboriosam nobis illo, non facilis quisquam sunt provident cumque nemo. Debitis odit reprehenderit officia recusandae, deserunt, id impedit, distinctio incidunt nemo non est velit eaque nulla tempore repellendus sed quod facere. Nostrum non, atque, suscipit incidunt placeat aspernatur impedit, earum nemo quidem molestiae dolore. Nemo totam id eos ab maxime minima.</p>
<p>Cum veniam, provident culpa enim eum magni ut maxime quae sint earum beatae minus delectus dolorum pariatur cupiditate voluptas aperiam, libero magnam. Nostrum ea architecto deleniti illo quibusdam quisquam, alias harum, ducimus possimus molestias perspiciatis dolorum nemo, blanditiis cupiditate exercitationem corporis ab eligendi sit itaque nihil laboriosam quos saepe quas? Commodi id dolorem debitis consequuntur nihil voluptates culpa temporibus iusto eligendi! Maxime quidem cupiditate quam corrupti blanditiis exercitationem dolore distinctio fugiat temporibus quas quibusdam totam quos eligendi et necessitatibus, dolor inventore culpa eveniet odit obcaecati mollitia modi? Sequi, quia, tenetur. Est pariatur minima adipisci, minus, culpa sit consequatur, fugit aperiam sint amet voluptatibus hic! Nesciunt cumque voluptate, velit saepe sunt numquam quam repellat accusamus in. Voluptas quod tempora omnis nobis quibusdam architecto, delectus quaerat nulla velit expedita error cumque distinctio non magnam repellat, odit laudantium similique voluptatibus totam, unde, voluptatum laboriosam. Qui repudiandae velit fugiat doloribus alias vero ipsa maxime voluptas saepe quis non laborum quae voluptates et minima nihil architecto earum, vel nemo maiores reiciendis! Autem velit vitae alias dolores saepe fugit sequi molestias, aspernatur quo delectus doloremque nihil obcaecati asperiores amet, id omnis ullam neque. Earum sed dicta perspiciatis, consectetur incidunt voluptatibus vel, omnis minus odit, aliquam nulla.</p>
</div>
</body>
</html>
は、なぜあなたは画像オフスクリーンを開始していますか？負の数は、この順序で左と上に向かっています。したがって、ビューポートのサイズを超えて左から144ピクセル、上から288ピクセルを開始しています。それはあなたが欲しいものですか？ 'background-repeat：no-repeat; background-repeat：repeat-x; '**あなたが成し遂げようとしていることを知りませんか？** – Radmation
プラス1の画像は4画像に似ています。画像の一部を利用しようとしていますか？月の部分のように？たぶん星だけ？その場合は、それをPhotoshopにプルし、それを必要な方法で切り取るほうがよいでしょう。あなたがする必要がない場合は、それを戦わないでください。地獄私はあなたのためにそれをやるよ – Radmation
スプライトは、星の夜のように見える画像を水平と垂直に繰り返す、スプライトだけにしたい。 – ioannis