我有一个问题,我找不到解决方法,我需要制作一个精灵作为容器的背景。
问题是我不知道该怎么做,我已经对此进行了搜索,但是找不到任何可以帮助我解决该问题的方法。
我想用作背景的精灵从坐标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>
最佳答案
您的CSS中需要一个background-repeat: no-repeat;
声明。然后,您可以将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>