[英]How to repeat an sprite in CSS as background
我有一個問題，我找不到解決方法，我需要制作一個精靈作為容器的背景。
問題是我不知道該怎么做，我已經對此進行了搜索，但是找不到任何可以幫助我解決該問題的方法。
我想用作背景的精靈從坐標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>
您需要background-repeat: no-repeat; CSS中的聲明。 然后，您可以將background-position和background-size到正確的位置。
.main { background: url("http://i.imgur.com/lfC2Pus.png"); background-position: -144px -288px; background-repeat: no-repeat; }
<!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>
CSS Sprite中的CSS background-position和background-repeat
[英]CSS background-position and background-repeat within a CSS sprite
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.