Jump to content
  • 0

css-спрайты (можно ли сделать?)


clavin
 Share

Question

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

Условный пример того, что я хочу сделать, можно увидеть здесь. здесь две кавычки сделаны двумя отдельными фоновыми изображениями. Можно ли их совместить в одно изображение? Учитывайте, что ширина и высота элемента для фона может быть любой и изменяться от ресайза.

Я рассмотрел этот вопрос и мне кажется, что это невозможно. Решил спросить у профессионалов, можно кто знает CSS-хитрость?

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

Нарпимер:

selector:before {
position: absolute;
top: Xpx;
left: Xpx;
width: Xpx;
height: Xpx;
background: sprite_image no-repeat position;
}
selector:after {
position: absolute;
bottom: Xpx;
right: Xpx;
width: Xpx;
height: Xpx;
background: sprite_image no-repeat position;
}

П.С. Для IE7 нужен фикс для поддержки этих псевдо-элементов

  • Like 1
Link to comment
Share on other sites

  • 0

Нарпимер:

selector:before {
position: absolute;
top: Xpx;
left: Xpx;
width: Xpx;
height: Xpx;
background: sprite_image no-repeat position;
}
selector:after {
position: absolute;
bottom: Xpx;
right: Xpx;
width: Xpx;
height: Xpx;
background: sprite_image no-repeat position;
}

П.С. Для IE7 нужен фикс для поддержки этих псевдо-элементов

Верно. В Интернете есть различные решения, как реализовать множественный бэкграунд для браузеров, не понимающих CSS3. Спасибо, что напомнил.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy