Сложность заключается в том, что если добавить изображения непосредственно к элементу кнопки как фон, через CSS, при этом указать позицию нужной картинки, выровнять по центру, запретить повторение,то вокруг, с той или иной стороны, в зависимости от положения выбранной иконки, останутся видны части остальных изображений спрайта.
Пример:
<div id='myButton'></div>
#myButton {
height: 48px;
width: 48px;
background-color: darkorange;
background-image: url('../img/my-icons.png');
background-repeat: no-repeat;
background-position: 12px 12px;
}
height: 48px;
width: 48px;
background-color: darkorange;
background-image: url('../img/my-icons.png');
background-repeat: no-repeat;
background-position: 12px 12px;
}
Чтобы решить эту проблему средствами CSS, без дополнительных HTML-тегов для блока кнопки, нужно добавить псевдоэлемент ::before, для которого задать размеры высоты и ширины соответствующие размерам изображения с нужной иконкой, в данном случаи - 24px на 24px.
Решение:
#myButton {
height: 48px;
width: 48px;
background-color: darkorange;
box-sizing: border-box;
padding-top: 12px;
}
#myButton::before {
display: block;
content: '';
background-image: url('../img/my-icon-min.png');
background-position: 0 0;
background-color: transparent;
background-repeat: no-repeat;
height: 24px;
width: 24px;
margin: 0 auto;
}
Вот такое простое решение. Надеюсь будет полезным.height: 48px;
width: 48px;
background-color: darkorange;
box-sizing: border-box;
padding-top: 12px;
}
#myButton::before {
display: block;
content: '';
background-image: url('../img/my-icon-min.png');
background-position: 0 0;
background-color: transparent;
background-repeat: no-repeat;
height: 24px;
width: 24px;
margin: 0 auto;
}
P.S. Честно говоря, жалко использовать для этого дела целый псевдо-элемент, ведь его можно более конструктивно применить, да и всегда доступно подключить шрифтовые иконки, но ради четырех простых кнопочек, мне достаточно и того что есть.
©http://magentawave.com
Комментариев нет:
Отправить комментарий