Question

所以在这里，我正在做webinaction制作的教程我坚持精灵部分我真的想学习它，因为精灵很有效。

 .profile, .admin_button, .trash, .favourites, .admin_table .delete, .admin_table .insert, .success {   
background-image: url(../images/sprites.png);
background: url(sprites.png) no-repeat;

}

.profile{
position: absolute;
right: 25px;
top: 10px;
background-position: -100px -199px;
width: 30px;
height: 30px;

}

.profile.logged_in {
background-position: -237px 0;

}

.profile.logged_out {
background-position: -353px 0;

}

.admin_button {
position: absolute;
right: 10px;
top: 20px;
height: 10px;
width: 10px;

}

.admin_button {
background-position: -759px -123px ;

}

.admin_button:hover {
background-position: -755px -17px ;

}

.trash {
margin: 30px 0 30px 0;
padding-top: 20px;
background-position: 0 0;
width: 60px;
height: 60px;

}

.trash:hover {
background-position: -122px 0;

}

.favourite {
background-position: -142px -140px ;
width: 20px;
height: 20px;

}

.favourite:hover {
background-position: 0 -141px ;

}

.movie_list li {
position: relative;

}

.movie_list li .add_remove {
position: absolute;
top: 10px;
right: 30px;

}

.admin_table .delete {
background-position: -429px -152px ;
margin-left: 40px;
width: 20px;
height: 20px;

}

.admin_table .delete:hover {
background-position: -288px -151px ;

}

.insert {
background-position: -619px 0;
margin-left: 40px;
width: 20px;
height: 20px;

}

.insert:hover {
background-position: -478px 0;

}

.admin_table .success {
background-position: -572px -149px ;
margin-left: 40px;
width: 40px;
height: 20px;

}

快速反应pleaaaaaaaaaase！我真的很想学习高级网站编码，所以如果你对我有任何建议，我真的很感激他们！谢谢！

Answer 1

首先，没有人会读到你写过的这整个蠕变。学习用最少的代码提问，并解释你的问题。

无论如何，试试这个：https://jsfiddle.net/u3e0tf9t/

<html>

<head>

<style>

div{float:left;}

.hello{

    background: url("http://img.photobucket.com/albums/v708/silverprodigy/ragon/seven.png") no-repeat scroll -83px -69px rgba(0, 0, 0, 0);
    display: block !important;
    height: 120px;
    margin: 0 auto;
    width: 45px;
}

</style> 

</head>

<body> 

<div><span class="hello"></span> </div> 

</body> 

</html>

请注意，我是如何获取图片中多个数字的第二的。是的，代码中的任何内容都不是很快。这需要多年的实践和完美。海市蜃楼，努力工作取得成果！

我的CSS Sprite Code有什么问题？

1 个答案: