Проблема с фоновым изображением спрайта CSS

Я использую изображение спрайта для своего веб-сайта, мои значки расположены горизонтально и вертикально.

Проблема в том, что когда я пытаюсь использовать один конкретный значок спрайта из изображения спрайта, я не могу использовать только соответствующий значок спрайта (округленный синим цветом в SS ниже), вместо этого я получил все изображение, охватывающее мой div, как показано ниже на снимке экрана.

Я хочу использовать только конкретную иконку слева от текста, используя padding-left (я дал 30 пикселей). Я также пытался использовать размер фона, он не работает.

Пожалуйста, помогите мне в этом. Заранее благодарю за любую помощь. Мой код

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <!--START: Adding of javaScript library -->
        <script type="text/javascript" src="/lib/jquery.min.js"></script>
        <!--END:   Adding of javaScript library-->

        <style>
            .sprite{
                background:url("images/css-sprite.gif") no-repeat scroll -165px -18px transparent;
                padding-left:30px;
                color:red;
            }
        </style>
    </head>

    <body>
        <div class="">
            <div class="sprite">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
        </div>  
    </body>
</html>

введите здесь описание изображенияСм. демонстрацию JS BIN http://jsbin.com/yojaj/1/edit


html css sprite css-sprites
person Mohamed Hussain    schedule 18.03.2014    source источник
comment
К сожалению, я не могу исправить ширину содержимого. Также я не могу изменить эту структуру HTML. Нужно исправить только через CSS.   -  person Mohamed Hussain    schedule 18.03.2014

Ответы (4)


arrow_upward
2
arrow_downward

Вам нужно добавить правила ширины и высоты в класс спрайта, чтобы они соответствовали размеру значка в нужном вам спрайте.

Также попробуйте добавить значок в качестве псевдоэлемента, например:

.sprite:before {
    content:'';
    display: inline-block;
    background:url("http://lorempixel.com/400/200/food") -50px -50px no-repeat transparent;
    margin-right:5px;
    color:red;
    width: 20px;
    /* icon width */
    height: 20px;
    /* icon height */
    vertical-align: middle;
}

FIDDLE

person Danield    schedule 18.03.2014
comment
:Спасибо за помощь. К сожалению, я не могу исправить ширину содержимого. Также я не могу изменить эту структуру HTML. Нужно исправить только через CSS. - person Mohamed Hussain; 18.03.2014
comment
@MohamedHussain - я обновил свой ответ - посмотрите, сработает ли он для вас - person Danield; 18.03.2014
comment
Спасибо за ответ, теперь он хорошо работает с IE8, и единственная проблема, с которой я сталкиваюсь только в IE7, все идеально. - person Mohamed Hussain; 18.03.2014

arrow_upward
2
arrow_downward

Вам нужно указать ширину и высоту для класса .sprite, например

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
        <head>
            <!--START: Adding of javaScript library -->
            <script type="text/javascript" src="/lib/jquery.min.js"></script>
            <!--END:   Adding of javaScript library-->

            <style>
                .sprite{
                    background:url("images/css-sprite.gif") no-repeat scroll -165px -18px transparent;
                    padding-left:30px;
                    width:10px;
                    height:20px;
                    color:red;

                }
            </style>
        </head>

        <body>
            <div class="">
                <div class="sprite">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
            </div>  
        </body>
    </html>
person Zahoor    schedule 18.03.2014
comment
:Спасибо за помощь. К сожалению, я не могу исправить ширину содержимого. Также я не могу изменить эту структуру HTML. - person Mohamed Hussain; 18.03.2014
comment
Добавьте элемент span внутри div и установите для него класс .sprite, чтобы вы не меняли основной DIV. - person Zahoor; 18.03.2014
comment
:Спасибо за помощь. К сожалению, я не могу исправить ширину содержимого. Также я не могу изменить эту структуру HTML. Нужно исправить только с помощью CSS - person Mohamed Hussain; 18.03.2014

arrow_upward
1
arrow_downward

Попробуй это:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <!--START: Adding of javaScript library -->
    <script type="text/javascript" src="/lib/jquery.min.js"></script>
    <!--END:   Adding of javaScript library-->

    <style>
        .sprite{
            background:url("images/css-sprite.gif") no-repeat scroll -165px -18px transparent;
            margin-right:30px;
            color:red;
        }
    </style>
</head>

<body>
  <div class="">
     <div class="sprite"></div><p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
    </div>  
</body>

person Rishabh Shah    schedule 18.03.2014
comment
Спасибо за помощь. К сожалению, я не могу исправить ширину содержимого. Также я не могу изменить эту структуру HTML. Нужно исправить с помощью CSS - person Mohamed Hussain; 18.03.2014
comment
@MohamedHussain Будет лучше, если вы создадите скрипку (вместе со своим изображением спрайта). Таким образом, мы можем знать, что именно происходит не так. - person Rishabh Shah; 18.03.2014

arrow_upward
1
arrow_downward

привык к этому

Определите свой класс html sprate icon следующим образом.

.sprite{
  background:url("images/css-sprite.gif") no-repeat scroll -165px -18px transparent;
  padding-left:30px;
  width:10px;
  height:20px;
 }

<div class="">
  <div>
     <span class="sprite"></span>  // add this icon try this way
     Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
</div>

----------------- ------------------Обновлено

чем делать это только для css

.sprite{
position:relative;
}
.sprite:after{
  content:"";
position:absolute;
left:0;
top:0;
  background:url("images/css-sprite.gif") no-repeat scroll -165px -18px transparent;
  padding-left:30px;
  width:10px;
  height:20px;
 }
person Rohit Azad Malik    schedule 18.03.2014
comment
:Спасибо за помощь. К сожалению, я не могу исправить ширину содержимого. Также я не могу изменить эту структуру HTML. Нужно исправить только с помощью CSS - person Mohamed Hussain; 18.03.2014
comment
@MohamedHussain проверьте мои обновленные ответы, вы можете сделать это только css, как это, мой ответ обновленный ответ - person Rohit Azad Malik; 19.03.2014