0
我有一个问题，我找不到如何解决，我需要做一个精灵作为一个容器的背景。如何重复CSS中的精灵作为背景
问题是，我不知道如何使它，我有这个搜索，但我找不到任何东西来帮助我解决这个问题。
我想作为坐标的背景开始使用精灵X = 144px Y = 288px
迄今唯一我所得到的是整个图像重复它每次。
.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>
你为什么要启动图像关闭屏幕？负数按照这个顺序向左和向上。因此，您将从视口尺寸开始向左144px并增加288 px。那是你要的吗？ '背景 - 重复：不重复; background-repeat：repeat-x;'**我不知道你在试图完成什么？** – Radmation
再加上图像就像4个图像一样...不是一个很好的图像来测试。你只是想利用一张图片？就像月亮部分一样？也许只是星星？在这种情况下，您最好将其拉到photoshop中，然后裁剪出您需要的样子。如果你不需要，不要打它。地狱我会为你做xD – Radmation
是一个精灵，我想让这个看起来像星夜的图像在水平和垂直方向重复，就是那个精灵。 – ioannis