CSS фоновое изображение?

Question

У меня есть div, который составляет 200 на 200 пикселей.

Если я хочу разместить фоновое изображение без повтора размером 30x30 пикселей в верхнем левом углу, на 120 пикселей слева и на 50 пикселей сверху ... при этом текст внутри этого элемента также отображается поверх фона изображение ... как бы я это сделал?

Я попробовал следующее, но, похоже, оно не работает.

background:url(http://example.com/background-image.png) no-repeat 120px 50px;

Есть идеи, как выполнить то, чего я хочу достичь?

Answer 1

Это может дать вам кое-что для работы. Кроме того, было бы намного легче отлаживать, если бы я мог видеть, что происходит. Возможно, путь к изображению неверен, какая-то другая сущность закрывает рамку, div разрушается сам по себе (фоновые изображения не передаются в блочной модели) или другое правило CSS переопределяет указанное вами.

<div style="width: 200px; height: 200px; font-size: 2em;
background: url(http://sstatic.net/so/img/logo.png)
no-repeat 120px 50px; border: 1px solid #f00;">
  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>

Answer 2

Откройте изображение в программном обеспечении для редактирования изображений по вашему выбору.

Сделайте холст размером 150 на 80 пикселей.

Поместите изображение внизу справа. Оставьте все остальное прозрачным (без фона позади изображения).

Сохранить как .png или .gif с включенной прозрачностью.

Бросить этого плохого парня в фоновое изображение = URL ("example.com/img.png");

Ты должен быть золотым.

Answer 3

В чем именно проблема? Изображение вообще не появляется? Или он расположен в другом месте? С CSS нет проблем. Проверьте, загружается ли изображение или нет. Для этого вы можете удалить позиции один раз и проверить, загружается изображение или нет.