Position image css background: CSS background-position property

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

• HTML
• изображение
• css

3

Если вас не интересует IE, вы можете использовать объект-подгонка и объект-позиция :

 img {
   объект подходит: обложка;
   положение объекта: по центру сверху;
}
 

5

Лучший способ добиться этого — использовать любой элемент html в сочетании с атрибутом фона css. В этом атрибуте вы можете определить поля как размеры для позиционирования и изменения размера фонового изображения. В вашем случае этот элемент будет иметь ширину и высоту, заданные вашей библиотекой урожая. Положение фонового изображения будет x и y (тоже из библиотеки), но инвертировано.

Неважно, какой элемент вы используете, это может быть любой (см. w3.org/TR/CSS2/colors.html), включая тег img, как показано в следующем примере:

Обратите внимание: если вы используете тег изображения, вам необходимо удалить атрибут src (например, с помощью JavaScript). В противном случае фоновое изображение не будет видно.

Тем не менее, я бы порекомендовал вам использовать JavaScript-библиотеку/плагин вместо того, чтобы писать что-то самостоятельно. Есть куча решений:

• JCrop (плагин jQuery)
• ImageAreaSelect (подключаемый модуль jQuery
• Урожай Uvumitools (плагин Mootools)
• Пользовательский интерфейс JS Cropper (на основе сценария и прототипа)

1

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Новая функция фонового положения в CSS | Элад Шехтер

Всем привет. Я предполагаю, что большинство из вас использовали или имеют опыт работы с CSS-свойством background-position, но, возможно, вы не знали, что это смещение позиционирования фоновых изображений.

(Это сообщение было первоначально опубликовано в июне 2013 года и обновлено, поскольку оно актуально и сегодня)

В background-position, до появления CSS3, вы должны были устанавливать позицию в верхнем левом углу элемента.
Например:

 div{ 
 background-position: 20px 40px; 
 /*  20 пикселей слева и 40 пикселей сверху  */ 
 } 

Проблема заключалась в том, что невозможно было определить точное положение из другой точки отсчета, например снизу/справа. Вы можете начать только с левого верхнего!

Раньше мы считали, что можем устанавливать только такие значения, как: background-position: right bottom или background position:70% 80% (70% слева, 80% сверху), но мы не могли установить значение 20 пикселей справа и 20 пикселей снизу, например.

Чтобы решить эту проблему, CSS3 предоставил нам возможность определить точку отсчета для нашего позиционирования и тем самым определить нашу точку 0,0.

Вместо того, чтобы записывать только 2 значения (горизонтальная и вертикальная точки слева вверху), CSS3 теперь позволяет нам записывать начальную точку горизонтального и вертикального положения вместе с их смещениями, например: справа 10 пикселей снизу 20 пикселей (всего 4 значения ).

Давайте создадим пример:

Сначала создадим пустой DIV с некоторыми стилями:

HTML

CSS

 .box{ 
 width:300px; 
 высота: 300 пикселей; 
 background-color:#ddd; 
 отступ: 10 пикселей; 
 граница: сплошная 3 пикселя #333; 
 радиус границы: 10 пикселей; 
 } 

Теперь мы добавим фоновое изображение с фиксированным размером, используя свойство background-size.

 .box{ 
 background:url(images/image.jpg) без повтора; 
 размер фона: 150 пикселей 150 пикселей; 
 } 

И, наконец, мы добавим значение New Background Position.