Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить — становится деканом. (Т. Мартин)
Группирование Наследование Каскадирование Валидация Идентификаторы и классы Написание эффективного кода
Самоучитель CSS
Вёрстка Изображения Текст Цвет Линии и рамки Углы Списки Ссылки Дизайны сайтов Формы Таблицы CSS3 HTML5
Новости
Блог для вебмастеров Новости мира Интернет
Сайтостроение Ремонт и советы Все новости
Справочник CSS
Справочник от А до Я HTML, CSS, JavaScript
Афоризмы
Афоризмы о учёбе Статьи об афоризмах Все Афоризмы
Видео Уроки
Видео уроки
Разместить статью у нас на сайте.
Популярные статьи
Наш опрос
Помогли мы вам
Наши новости
РЕКЛАМА
27-03-2016, 11:24
Сделать, чтобы фон не повторялся — «Фоновая картинка»
Internet Explorer
Chrome
Opera
Safari
Firefox
Android
iOS
4.0+
1.0+
4.0+
1.0+
1.0+
1.0+
1.0+
Задача
Добавить фоновую картинку так, чтобы она не повторялась по горизонтали и вертикали.
Решение
Используйте свойство background со значением no-repeat для селектора body.
Описание
По умолчанию фоновая картинка повторяется по горизонтали и вертикали, выстраиваясь мозаикой на всём поле веб-страницы. Однако такое поведение фона не всегда требуется, поэтому на помощь придёт значение no-repeat, добавляемое к стилевому свойству background.
Общий синтаксис в этом случае будет следующий.
<style>
body { background: url(путь к графическому файлу) no-repeat; }
</style>
В данном случае фон добавляется к веб-странице, исходно располагаясь в левом верхнем углу окна браузера и отображается единственный раз, т.е. без повторений. В примере 1 показано, как это сделать конкретно.
Рис. 1. Фоновая картинка на веб-странице без повторения
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Еще новости по теме:
Другие новости по теме:
Комментарии для сайта Cackle
Справка: Как сделать фоновое изображение кликабельным — HTML и CSS — Форумы SitePoint
horatiub
1
Я устанавливаю фоновое изображение на сайте с помощью этого кода CSS:
body { background:#2f2f2e url(img/photo.jpg) top center no-repeat; верхнее поле: 200 пикселей; цвет:#333; шрифт: 12px Arial, Helvetica, без засечек;}
Два вопроса:
Как мне превратить это фоновое изображение в href, кликабельное изображение?
Изображение настроено на 1280 пикселей и отлично выглядит на широкоформатных мониторах, но на нешироких оно не показывает все изображение. Предложения?
Спасибо.
система
2
Два ответа:
Можно ли использовать раскрашенные зерна на кофейной кружке для приготовления кофе?
Когда вы смотрите на свой телевизор, сидя на диване, на разумном расстоянии от него, вы видите всю картинку. Но когда ты буквально засовываешь свое лицо в экран телевизора, ты видишь только его часть. Можете ли вы уменьшить размер телевизора, чтобы позже увидеть всю картинку?
xhtmlcoder
3
Noonnope означает, что по сути вы не можете сделать его кликабельным, потому что это не разметка, а CSS. Кроме того, если у вас есть изображение размером 1280 пикселей, оно останется шириной 1280 пикселей, так как это фиксированная ширина, поэтому размер не будет изменяться в процентах.
Stomme_poes
4
Как мне превратить это фоновое изображение в href, кликабельное изображение?
Нет, однако можно установить тег привязки прямо поверх изображения и скрыть текст привязки или вообще не иметь текста привязки. Не рекомендуется, но если вы видели «кликабельные» фоновые изображения, они так и сделали.
Изображение настроено на 1280 пикселей и отлично выглядит на широкоформатных мониторах, но на нешироких оно не показывает все изображение. Предложения?
Если это был HTML-тег
, у вас есть возможность (ограниченная) масштабировать его. Однако фоновые изображения не масштабируются.
То, что я видел, люди делают с масштабируемыми фоновыми изображениями (и это нехорошо, но можно сделать), у них есть изображение в качестве первого дочернего элемента (хотя оно должно быть внутри блочного элемента, не может сидеть отдельно непосредственно внутри тега body), ширина и высота которого установлены на 100%. Он должен быть абсолютно позиционирован, чтобы он мог это сделать, для тела потребуется высота 100%, а затем для дочернего элемента после изображения, у которого есть контент, потребуется минимальная высота 100%. positioned» (подойдет position: relative), чтобы изображение abso-po’d не закрывало его.
Имейте в виду, что это большой файл, и даже те, у кого маленькие экраны, загружают это большое изображение целиком, даже если они не видят его в исходном размере.
Кроме того, экраны не все квадратные или прямоугольные с одинаковыми размерами: существует много разных разрешений, поэтому ваше изображение будет растянуто и сплющено на многих экранах. Вы ничего не можете с этим поделать.
Ну, вы можете пойти другим путем: сделать изображение фоновым для первого дочернего элемента body (дива или чего-то еще), а затем установить ширину этого div равной ширине изображения. Пользователи получат полосу прокрутки на небольших мониторах, что означает, что они могут прокручивать вправо, чтобы увидеть остальную часть изображения.
Если вы делаете это кликабельным, я не уверен, какова ваша точка/цель.
система
5
Я нашел это на другом сайте. Он устанавливает ширину изображения «фона» на 100%, что поддерживает соотношение сторон изображения bg, и поэтому ваш bg не искажается при изменении размера окна браузера. Единственное, что я добавил, это обернуть img тегом , чтобы сделать его кликабельным.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis magna sed urna ultrices aliquet.
Sed tempor, ante et semper molestie, metus metus ultricies arcu, ornare iaculis tellus justo at dui. Ут
tempor commodo elit, fringilla malesuada sapien suscipit et. Vestibulum bibendum dapibus porttitor. Проин
condimentum volutpat ultrices. Ут в aliquam ipsum. Donec tempor placerat feugiat. Маурис в elementum mi.
Sed lobortis congue est, sed rhoncus justo imperdiet et. Nunc malesuada aliquam lobortis. Морби сит амет сапиен
ac urna hendrerit varius. Сед луктус курсус эним. Nulla vestibulum lacus quis lectus aliquet scelerisque. Сед
vulputate accumsan massa convallis vehicula. Suspendisse eget imperdiet arcu. Pellentesque nisi elit, mollis
в aliquam eget, accumsan id диам.
ПолОБ
6
Если вы масштабируете изображения в IE, вам может быть интересно следующее:
Размер изображения составляет 1280 пикселей, и оно отлично выглядит на широкоэкранных мониторах, но на нешироких оно не показывает все изображение. Предложения?
Нельзя ли просто центрировать изображение на фоне (background-position:50% 0), чтобы лучшая часть изображения была видна в меньших размерах.
Я бы сказал, что эти большие фоновые изображения обычно замедляют работу сайта, так что будьте осторожны. Это делает прокрутку прерывистой в некоторых браузерах, и, конечно, изображение размером 1280 пикселей, вероятно, будет иметь больший размер файла, чем вся остальная часть сайта.
Как обрезать изображение с помощью CSS — Блог Uploadcare
Обрезка изображения с помощью CSS — это хорошо освещенная тема, и в Интернете есть множество статей об этом, так зачем еще одна? Это хороший вопрос, и у меня есть ответ. Многие сообщения охватывают 1000 и 1 хакерский способ обрезать изображение, что может ввести в заблуждение новичка. Мы отбросим методы обхода и сосредоточимся на тех, которые изначально предназначались для обрезки изображений. К счастью, теперь у нас есть хороший набор этих методов и даже больше.
«Зачем обрезать изображение в браузере?» Я бы спросил?
«Почему мы не можем перестать спрашивать почему и перейти к теме, Герман?» Вы можете резонно спросить меня в ответ.
Нам нужно продолжать спрашивать «почему», потому что мы хотим принять взвешенное решение. Мы хотим понять, где это применимо и чего нам это стоит. Иногда мы хотим обрезать изображение с помощью CSS просто потому, что мы фронтенд-разработчики и не можем сделать это на сервере. Это может быть либо из-за отсутствия знаний, либо из-за доступа к серверу. Хорошей новостью является то, что богатый CDN API здесь к вашим услугам.
Посмотрите на это красивое изображение горящих углей:
Недостаток этого метода в том, что нам нужно используйте CDN для хранения наших изображений.
Остались ли случаи, когда нам нужна обрезка изображений на основе CSS? Конечно, я могу подумать о реализации эффекта параллакса или карусели фиксированного размера для отображения разных изображений. Кроме того, линзы на веб-сайтах электронной коммерции часто используют обрезку.
В этой статье мы рассмотрим существующие способы обрезки изображения с помощью CSS от самых простых до самых сложных:
Свойство background-image с background-size и background-position
Изображение или фоновое изображение с постоянным соотношением -path
Первый и основной подход. Используйте общий элемент и два свойства: object-fit и object-position . Давайте исследуем объект-подгонка в первую очередь. Я не буду заниматься формулировкой и воспользуюсь определением из стандарта CSS.
Свойство object-fit указывает, как содержимое замененного элемента должно быть размещено в поле, установленном его используемой высотой и шириной.
Воспользуйтесь предоставленной ссылкой на стандарт, чтобы узнать о различных вариантах значения. Я приведу несколько живых примеров, чтобы проиллюстрировать их.
Идея объект-фит заключается в том, что у нас есть , и он имеет указанный размер:
В этом случае размер составляет 150 на 150 пикселей. Размер изображения, которое мы хотим продемонстрировать, составляет 201 на 300 пикселей. Нам нужно как-то примирить эту разницу. 9Свойство 0132 object-fit позволяет задать стратегию согласования. Должен признать, что это не всегда приводит к обрезке. Иногда вы растягиваетесь или уменьшаетсяе. Тем не менее, полезно предоставить полную картину объектно-подгонки , чтобы не вводить вас в заблуждение.
Значение в масштабе выглядит не так очевидно. Давайте рассмотрим следующий пример, чтобы лучше понять, как это работает.
На данный момент мы, наконец, достигли позиции объекта Свойство CSS. Это свойство помогает нам перемещать отображаемый объект. Взгляните на следующие примеры. Прочтите заголовки ниже, чтобы понять варианты свойства object-position .
Теперь вы понимаете, как настроить положение обрезанного изображения.
Уф, последняя часть была довольно большой. Будет ли этот такой же? Ну, я надеялся, что это будет что-то очень похожее, чтобы мы могли его немного сократить. Я думал, мы увидим небольшую смысловую разницу, которой я посвящу небольшой абзац и несколько примеров. У фонового изображения оказалось фальш-дно, а потом еще одно.
Позвольте мне сначала указать на стандарты: background-image, background-size и background-position. Не тратьте на это слишком много времени, если вам нужны практические ответы. Лучше используйте приведенные ниже примеры и исследуйте их CSS. Воспользуйтесь этими ссылками, если вам нужно глубокое понимание или вдохновение для экспериментов.
Где бы вы хотели использовать фоновое изображение вместо обычного ? Что ж, использование фоновых изображений не дает вам возможности перетаскивания. Если мы говорим о восприятии в этом контексте, я предлагаю использовать фоновые изображения для создания настроения. Простые изображения хороши, если они являются активными действующими лицами повествования.
Однако давайте отойдем от перцептивных рассуждений и вернемся к базовым примерам:
Вы можете видеть, что начальное состояние фонового изображения скорее имело бы название плиты, чем кадрирование. Другие примеры демонстрируют поведение, которое мы ожидаем от кадрирования. Использование свойства background-size дает вам больше гибкости с точки зрения размера, который вы можете установить, чтобы растянуть изображение.
.strange-size-background-image {
размер фона: 1234px 5678px;
}
Приведенный выше код абсолютно действителен.
Следующая часть дает вам дополнительную гибкость обрезки. Возможно, вы помните свойство box-sizing , сообщающее браузеру, что включать в ширину. Есть два свойства фона, использующие ту же идею: background-origin и background-clip .
Я создал пример, демонстрирующий девять возможных комбинаций:
Оба background-origin и background-clip имеют три возможных значения: border-box , padding-box и content-box . В первом случае вы определяете место для размещения фонового изображения. Для border-box верхний левый угол фона будет в верхней левой точке границы. Логика одинакова для padding-box и content-box . Единственная разница заключается в том, где вы применяете фон.
Свойство background-clip сообщает, где происходит «обрезка». Взгляните на следующий CSS:
.origin-border-clip-content {
background-origin: рамка-бокс;
фоновый клип: поле содержимого;
}
Это заставляет ваше фоновое изображение начинаться в верхнем левом углу границы и продолжаться до нижнего правого угла. Но вы увидите единственный фрагмент под содержимым из-за примененного отсечения.
Описанные два свойства были первым ложным дном, о котором я упоминал. Почему я их так назвал? Потому что они редкие гости в других статьях по теме, а я их обнаружил только в спецификации. А что такое второе фальш-дно? Это обрезание текста. Самое интересное о text Значение свойства background-clip заключается в том, что оно исходит из так называемого HTML Living Standard. За этим стоит конфликт старых времен, а префикс -webkit- — это старый подход к проверке новых функций в браузерах. Только эти два фактора могут привнести сюжет и поворот в эту статью, но не будем заходить так далеко. Взгляните на этот очаровательный класс CSS:
Это позволяет нам реализовать красивый эффект изображения, раскрашивающего наш текст.
До написания этой статьи я знал, что этот эффект доступен в SVG и собирался вам его описать. Теперь нам это больше не нужно, так как у нас есть гораздо более простое CSS-решение.
Больше всего хаков в прошлые времена использовалось для сохранения соотношения содержимого обрезанного изображения. Когда вы используете изображение, имеющее 100% ширину контейнера, вы не можете явно задать высоту, чтобы сохранить пропорции. В этом вам поможет CSS-свойство аспектного отношения. Он имеет достойную поддержку современных браузеров, но не настолько хорош, чтобы оставаться небрежным. Пожалуйста, проверьте caniuse. com для проверки.
Правильно заданный радиус границы и скрытый перелив — два инструмента мастеров CSS, рисующих свои картинки. Мы воспользуемся их методами, чтобы сделать округлую обрезку. Мы не будем задерживаться здесь надолго, потому что этот подход работает как с обычными, так и с фоновыми изображениями, и мы уже рассмотрели их.
Красивое изображение собаки выше имеет непрямоугольную рамку. Вы можете попробовать навести на него курсор и увидеть, что браузер принимает не невидимую прямоугольную границу, а реальную.
Это свойство CSS является единственным дополнением, необходимым для применения правильной обрезки:
Синтаксис свойства border-radius сложен, и я рекомендую использовать хороший справочник, чтобы понять его лучше.
Эта техника самая сложная среди названных и самая мощная. Возможно, потребуется отдельная статья, чтобы охватить все его возможности. Или специальную книгу, если вас интересует тема SVG. Мы рассмотрим его синтаксис, основное использование и рассмотрим несколько примеров.
Если вы немного подумаете об этом CSS-инструменте, то поймете, что в каком-то смысле это единственный инструмент, названный в этой статье и посвященный обрезке изображений. Другие CSS-свойства имеют побочный эффект обрезки — мы вообще удосужились их рассмотреть? Потому что эти свойства намного доступнее в использовании. Кроме того, иногда кадрирование нужно как побочный эффект, а не основной.
Давайте сначала посмотрим на синтаксис свойства clip-path:
Мы исследуем каждую от самой примитивной до самой сложной.
нет
Путь отсечения не создается.
базовая форма и блок геометрии
Эта часть синтаксиса позволяет нам работать с предопределенным набором форм. Несмотря на свои ограничения, он довольно мощный. Для базовой формы вы можете использовать inset() , circle() , ellipse() , polygon() или path() . Последний предоставляет возможность использовать синтаксис SVG для обрезки.
Мы могли бы опустить значение геометрической коробки . Что ж, мы можем использовать его и пропустить базовую форму . При использовании блока геометрии вы ограничиваете обрезку определенной областью, например, padding-box или в стиле SVG stroke-box . Я не буду приводить примеры примененного блока геометрии . Если бы я попытался показать каждый образец, мне бы потребовалось как минимум 42 из них.
Тем не менее, вы можете понять, глядя на примеры 9Свойство 0132 background-clip представлено выше.
clip-source
Под clip-source здесь понимается функция CSS url() . Большинство браузеров на момент написания статьи не поддерживают внешние SVG. Что это значит для нас как разработчиков? Синтаксис подразумевает, что где-то в разметке страницы у вас есть элемент , содержащий со специальным идентификатором . Практически не поддерживаемый внешний SVG — это отдельный файл. Также мы поставим внутри , специальное место внутри SVG, предназначенное для определения, но не для рисования. См. следующий пример:
Вы можете найти SVG, который я использовал в части HTML этого примера. Содержит элемент с описанием необходимого зигзага в свойстве d . На данный момент я был очень доволен, но CSS превзошел мои ожидания. Оказывается, я могу визуально обрезать изображение и заставить текст вокруг него отражать его форму. Обратите внимание, что этот подход работает только с плавающими элементами. Посмотрите на следующий пример:
Вы можете подумать, что внешняя форма — это непонятная черта одной из первоклассных ночных построек. Я рад разочаровать вас, поскольку мы работаем со зрелым свойством CSS, поддерживаемым 94,61% доступных браузеров. Плохая часть этого свойства заключается в том, что вы не можете использовать свой SVG для отсечения из предыдущего шага. Я думаю, что материалы CSSWG и MDN вводят в заблуждение относительно доступности синтаксиса пути — его нет на веб-сайте W3C, и я не смог найти его среди кода на GitHub или заставить его работать в Firefox или Chrome. . Пожалуйста, следите за моей проблемой, созданной в репозитории MDN GitHub, чтобы получать обновления расследования.
Я вручную преобразовал указанное выше свойство SVG path и использовал значение polygon shape-outside . Я также использовал shape-margin: 1em, чтобы установить свободное пространство вокруг изображения для лучшего визуального эффекта. Пожалуйста, изучите раздел CSS примера CodePen.
Обрезка изображений с помощью CSS оказалась гораздо более широкой темой, чем я мог себе представить. Если вам нужно обрезанное изображение без динамики, я бы рекомендовал использовать для этого ваши CDN API. Вы также можете заселить сервер, но это потребует дополнительного обслуживания, поэтому взвесьте все за и против.
Однако такое поведение фона не всегда требуется, поэтому на помощь придёт значение no-repeat, добавляемое к стилевому свойству background.
1.
Предложения?
Предложения?
Кроме того, если у вас есть изображение размером 1280 пикселей, оно останется шириной 1280 пикселей, так как это фиксированная ширина, поэтому размер не будет изменяться в процентах.
Однако фоновые изображения не масштабируются.
Вы ничего не можете с этим поделать.
jpg" alt="логотип" />
Это может быть либо из-за отсутствия знаний, либо из-за доступа к серверу. Хорошей новостью является то, что богатый CDN API здесь к вашим услугам.
Я приведу несколько живых примеров, чтобы проиллюстрировать их.
Лучше используйте приведенные ниже примеры и исследуйте их CSS. Воспользуйтесь этими ссылками, если вам нужно глубокое понимание или вдохновение для экспериментов.
Единственная разница заключается в том, где вы применяете фон.
Только эти два фактора могут привнести сюжет и поворот в эту статью, но не будем заходить так далеко. Взгляните на этот очаровательный класс CSS:
com для проверки.
Мы рассмотрим его синтаксис, основное использование и рассмотрим несколько примеров.
Последний предоставляет возможность использовать синтаксис SVG для обрезки.
Практически не поддерживаемый внешний SVG — это отдельный файл. Также мы поставим 
Я думаю, что материалы CSSWG и MDN вводят в заблуждение относительно доступности синтаксиса пути 