Что случилось с моим кодом Sprite CSS?

-2

Так вот, я делаю учебник, сделанный с помощью webinaction. Я застрял в разделе спрайтов. Я действительно хочу изучить его, потому что спрайты эффективны.Что случилось с моим кодом Sprite 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) и создать [ Minimal, Complete и Verifiable] (http://stackoverflow.com/help/mcve). Нам будет легче помочь вам. В чем твоя проблема ? –

проверить с вашим пути изображения –

Jishnu путь изображения правильный. –

Прежде всего никто не будет читать всю эту ползучесть, которую вы написали. Научитесь задавать вопросы с минимальным кодом и объяснять только свою проблему.

В любом случае, попробуйте следующее: 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

Мне очень жаль, что это мой первый вопрос, задающий вопрос, поэтому я действительно не знаю, как все работает здесь. Спасибо, кстати, сэр :) –

Что случилось с моим кодом Sprite CSS?

ответ

Смежные вопросы