如何在CSS中重复精灵作为背景
[英]How to repeat an sprite in CSS as background
问题描述
I have a problem, which i can't find how to solve, i need to make an sprite as a background of a container. 
我有一个问题，我找不到解决方法，我需要制作一个精灵作为容器的背景。
The problem is that i can't figure out how to make it, i have search about this but i couldn't find anything to help me to solve this. 问题是我不知道该怎么做，我已经对此进行了搜索，但是找不到任何可以帮助我解决该问题的方法。
The sprite i want to use as background start in the coordinates x=144px y=288px 我想用作背景的精灵从坐标x = 144px y = 288px开始
so far the only what i get is the whole image repeat it everytime. 到目前为止，我唯一得到的就是整个图像每次都重复。
.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>
Basically what i want, is what i post here below, but instead of using an image, i want to use a specific sprite inside an image. 基本上我想要的是我在下面发布的内容，但是我不想使用图像，而是要在图像内部使用特定的精灵。
.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>
1 个解决方案
解决方案1
0 2016-11-23 00:32:39
You need a background-repeat: no-repeat; 您需要background-repeat: no-repeat; declaration in your CSS. CSS中的声明。 Then you can adjust your background-position and background-size to the correct position. 然后，您可以将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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
CSS Sprite中的CSS background-position和background-repeat - CSS background-position and background-repeat within a CSS sprite
如何使用CSS重复背景图片 - How to repeat background image with css
如何将 CSS 精灵用于重复背景图像？ - How to use a CSS sprite for a Repeating background image?
如何将css精灵定位为另一个类的背景 - how to position a css sprite as background for another class
CSS：如何重叠HTML背景重复图块？ - CSS: How to overlap HTML background repeat tiles?
CSS垂直重复背景 - css repeat background vertically
CSS：背景重复增量 - CSS: Background repeat increment
带有 CSS 精灵背景的响应式圆圈 - Responsive Circle with CSS Sprite background
CSS Sprite图片背景问题 - CSS Sprite Image Background Issue
如何将CSS背景精灵重用于不同大小的图标？ - How to reuse a css background sprite for icons of different sizes?
相关标签