Как расположить фоновое изображение в верхнем левом и нижнем правом углу html-элемента?

Я получил абзац, и я хочу иметь видимый "маркер", чтобы показать начало и конец абзаца пользователю.

У меня нет проблем, чтобы показать backgroundimage в верхнем левом углу, но я не знаю, как расположить фоновое изображение в нижнем правом конце. Вот мой css для позиционирования изображения в левом верхнем углу:

p[class] {
    background-image: url("../../image/my_image.gif");
    background-position: left top;
    background-repeat: no-repeat;
}

Я не ищу решение с использованием дополнительных элементов html!!! Он должен работать только с помощью css! Из-за того, что абзац установил элементы pseude-before и pseudo after, я не могу их использовать здесь. Итак, вопрос:

как я могу расположить фоновое изображение в верхнем левом и нижнем правом углу html-элемента без использования дополнительных html-элементов, но только css (и никаких псевдоэлементов)?

7
background background-image css html javascript

3 ответов

Кирилл рядом, но ошибается. это должно быть background-position: right bottom;

в общем - его возможно использовать числовые значения. Так для background-position: right bottom; вы можете также написать background-position: 100% 100%; и background-position: left top; в результате background-position: 0 0;

также взгляните на спецификации W3C на этом:http://www.w3.org/TR/css3-background/#the-background-position

к комментарию sree выше: это совершенно неправильно,left: 0px ; top:0px; ссылается на позиционирование самого элемента HTML при использовании position:relative или position:absolute

изменить: если вам нравится использовать несколько фонов вы можете отметить, что это также следует:

p[class] {
    background-image: url("../../image/my_image.gif"), url("../../image/my_image.gif");
    background-position: left top, right bottom;
    background-repeat: no-repeat;
}

посмотреть http://caniuse.com/#feat=multibackgrounds для кросс-браузер поддержка

здоровается

Тома

12

Если поддержка браузера не является проблемой для вас, вы можете сделать с CSS3 несколько фонов:http://www.css3.info/preview/multiple-backgrounds/

4

Как насчет попытки background-position: bottom right вместо left top ?

1