私のCSSスプライトコードで何が問題になっていますか？

-2

ここで私はwebinactionによって作成されたチュートリアルをやっています。私はスプライトのセクションに固執しています。スプライトが効率的であるため、本当にそれを学びたいと思っています。私のCSSスプライトコードで何が問題になっていますか？

.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;

}

速い応答pleaaaaaaaaaaase！私は本当に先進的なウェブサイトのコーディングを学びたいので、私に何か提案があれば、本当にありがとう！ありがとうございました！

出典

2016-12-08 Lexer Ivan King Sodela

ようこそスタックオーバーフロー！最初に[ツアー]（http://stackoverflow.com/tour）にアクセスし、[よくある質問をする方法]（http://stackoverflow.com/help/how-to-ask）を学んで[最小、完全、および検証可能]（http://stackoverflow.com/help/mcve）の例を参照してください。私たちがあなたを助けてくれるのは簡単です。あなたの問題は何ですか？ –

画像パスで確認してください –

画像のパスが正しいです。 –

まず最初に、誰もあなたが書いたこの全体のクリープを読むつもりはない。最小限のコードで質問し、問題点のみを説明することを学びます。

とにかく、これを試してみてください。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>

お知らせを、私は画像内に複数の人物の第二拾ってきましたか。そして、コード内の何も素早くはありません。それは練習の年を取る&完璧です。クイックはミラージュ、ハードワークは果物を負います！

出典

2016-12-08 08:46:54 Deadpool

これは初めてここで質問するのは初めてのことですので、ここでどのように動作するのか本当に分かりません。ありがとうbtwサー： –

私のCSSスプライトコードで何が問題になっていますか？

答えて

関連する問題