CSS: два фоновых изображения с позицией на одном элементе

Question

В моем файле css у меня есть одно правило: два добавляют два фоновых изображения до и после текстового элемента. Раньше я использовал два изображения, и все было в порядке. Но теперь я использую спрайты: поэтому мне нужно получить область большого изображения и опубликовать его в элементе (background-position), но у меня есть одна проблема: если я установил положение фона: я не мог бы придерживаться его положения, например, слева по центру и справа от центра :

background: url(../images/png/elements.png) no-repeat -5px -152px, url(../images/png/elements.png) no-repeat -5px -104px;

Как я могу разместить первую часть слева, а вторую справа от элемента?

Раньше было:

background: url(../images/png/mail.png) no-repeat left center, url(../images/png/edit.png) no-repeat right center;

Это реально делать?

Также: я использую его с :hover

html css

3

brabertaser19 3 Мар 2015 в 11:19

Answer 1

Боюсь, что невозможно ограничить видимую область изображений спрайтов, если не ограничен размер самого элемента.

Однако, возможно, вы могли бы назначить фоновые изображения псевдоэлементам ::before и ::after, которые правильно расположены слева / справа от родительского блока (либо с помощью float, либо {{X3 }} позиционирование).

Так что вы можете обрабатывать положение каждого значка независимо друг от друга.

Например:

.box:before, .box:after {
  content: "";
  display: inline-block; /* or position these elements by floats, etc. */
  width: 48px;           /* for instance */
  height: 48px;          /* for instance */
 }

.box:before {
  background: url(../images/png/elements.png) no-repeat -5px -152px;
}

.box:after {
  background: url(../images/png/elements.png) no-repeat -5px -104px;
}

<div class="box"></div>

2

Hashem Qolami 3 Мар 2015 в 08:42

Answer 2

Не используйте для этого Shorthand (особенно в свойстве position):
попробуйте что-то вроде:

div {
    width: 100%;
    height: 190px;
    border: 1px solid red;
    background: url(http://alt-web.com/Images/CSSSprite.jpg), url(http://alt-web.com/Images/CSSSprite.jpg);
    background-position: left top, right bottom;
    background-repeat: no-repeat;
}

<div></div>

Изменить: пример с пикселями, нулем и%.

div {
    width: 100%;
    height: 190px;
    border: 1px solid red;
    background-image: url(http://alt-web.com/Images/CSSSprite.jpg), url(http://alt-web.com/Images/CSSSprite.jpg);
    background-position: 0 0, 100% -1215px;
    background-repeat: no-repeat;
}

<div></div>

0

gmo 3 Мар 2015 в 08:54

Answer 3

Используемые вами left и right принадлежат background-position. Определения пикселей имеют приоритет над ними.

Вы должны разделить изображения на два разных элемента.

1

JNF 3 Мар 2015 в 08:46

CSS: два фоновых изображения с позицией на одном элементе

3 ответа

Изменить: пример с пикселями, нулем и%.

Похожие вопросы

Новые вопросы

html