Как скрыть картинку в css
Перейти к содержимому

Как скрыть картинку в css

  • автор:

Как прятать

Когда display: none , а когда visibility: hidden ? — спрашивает нас RedFox. Зависит от того, что вы пытаетесь сделать. Есть и другие варианты как спрятать блок и даже специальный атрибут. Давайте разберёмся!

Если вам приходится что-то прятать, то лучше всего это вообще убрать: сайт легче, код чище. ошибок меньше! Но если вам нужно, чтобы оно там пряталось до поры, а потом кому-то пригодилось — это другое дело. Здесь важно не ошибиться с выбором способа.

display: none

Самый простой и популярный — display: none , он работает как топор: элемент как будто вырубают из HTML. Его не видно на странице и соседние блоки про него ничего не знают. Просто нет и всё. Его даже скринридеры игоририруют и не читают содержимое — будьте аккуратнее с этим.

/* Вырубает */ .cut-down

Что интересно, несмотря на полное вырубание элемента, браузеры всё равно загружают картинку из img с display: none . Если же картинка указана фоном, то Chrome и Edge её тоже загружают, а Firefox и Safari — нет. Ну, разные у них взгляды на оптимизацию загрузки, что поделать.

Другой способ — visibility: hidden

Он работает, как Кольцо Всевластья: элемент вроде здесь и соседние блоки его чувствуют, но его не видно. И чем это отличается от opacity: 0 ? Opacity просто делает элемент прозрачным (или полупрозрачным), а visibility: hidden ещё не даёт с ним взаимодействовать: навести, кликнуть, сфокусировать.

/* Прячет */ .one-ring < visibility: hidden; >/* Не сработает */ .one-ring:hover

У visibility: hidden есть другая приятная особенность: свойство наследуется, а значит ребёнок невидимого родителя может сменить видимость на visible . Такой трюк не пройдёт ни с display: none , ни с opacity: 0 . С ним удобно делать всплывающие меню и подказки.

Иногда нужно, чтобы элемент не мешал дизайну, но при этом не прятался от скринридеров, оставаясь частью содержимого. Ну не нарисовал дизайнер здесь заголовка, а по логике документа он здесь нужен. Вот бы нам что-то вроде display: hidden или visibility: none ! Это я только что придумал, в природе их не существует.

Недавно в черновике CSS Display третьего уровня появилось свойство box-suppress со значениями show , discard и hide . Оно отвязывает видимость блока от display — ведь с обратной стороны от none есть не только block , но и inline , flex , grid . Значение discard привычно вырубает элемент, а hide делает то самое волшебное комбо. Читайте подробнее у Рейчел Эндрю.

/* То, что нужно */ .combo

К сожалению, до box-suppress нам ещё долго ждать. Его не только ещё нет в браузерах, но уже в том черновике — недавно его перенесли в следующий уровень, чтобы закончить текущий вовремя. Так что придётся делать магию самим — следите за руками.

Есть такой паттерн «visually hidden» или «визуально спрятанный», чтобы прятать элементы из дизайна, но оставлять доступным их содержимое. Про другие нюансы со скринридерами читайте у Тима Райта. Как это работает: вы делаете универсальный служебный класс и добавляете его к элементам, которые нужно доступно спрятать. Обычно его так и называют: visually-hidden , через дефис.

 

Важный за головок, которого нет

Если посмотреть что внутри, то это обычный position: absolute плюс clip , который обрезает элемент до нуля. То есть он не влияет на соседей и становится невидимым. Все остальные свойства добавляют универсальности и кроссбраузерности, чтобы класс можно было не глядя шлёпнуть на любой элемент. Подробнее читайте в справке к ally. js Родни Рейма.

.visually-hidden

А вы знали, что любому элементу можно добавить атрибут hidden и он пропадёт?

Теперь знаете! В современных браузерах на этот атрибут повешен тот самый display: none , который вырубает элемент. Он бинарный как required или checked , так что его удобно выставлять через JavaScript. Только не забудьте добавить в стили [hidden] < display: none >для IE 10, Safari 5 и других старых браузеров.

  // JS div.hidden = true; 

Это почти всё, что вам нужно знать про прятки в CSS. Попробуйте эти способы, они все хороши в разных ситуациях. Главное, не рубите с плеча и думайте о доступном содержимом.

Как скрыть картинку в css

Я, может, не понимаю до конца всего, не подскажете:

1 min read

Jan 21, 2019

  1. Да, если нужно скрыть элемент от вспомогательных технологий, то нужен атрибут aria-hidden=»true» . Не важно, каким образом такой элемент скрыт в CSS.
  2. В случае с svg-спрайтом и кнопками из статьи получается, что изображение для скринридеров становится текстом, и нам не нужно скрывать его от вспомогательных технологий как декоративный элемент. Можно использовать и aria-label=»» в . Особенно хорошо этот вариант подходит для случаев, если вместо текста символ из Юникода. А вот если у такой кнопки изображение, то его придётся скрыть от скринридеров, ведь у нас есть текст кнопки в aria-label=»» и картинка становится просто декоративной.

Written by Tatiana Fokina

Тёмная материя мира фронтенда.

Скрыть часть фоновой картинки

Author24 — интернет-сервис помощи студентам

И есть картинка (пока для наглядности абсолютно спозиционирована):

1 2 3 4 5 6 7 8 9 10
.qwe_picture { position: absolute; width: 1236px; height: 695px; left: 102px; top: 64px; background: url(../img/cat.png); background-size: cover; }

Вопрос: как сделать так, чтобы часть картинки было видно через #qwe как его фон, а остальная часть картинки не была видна?
Я не совсем понимаю структуру вёрстки — в какой col-12 запихнуть картинку на бекграунд + не понимаю куда при этом пихать overflow: hidden. Ну и возможно тут нужно ещё поиграться с z-index? Пока лишь вкинул col-12 с картинкой выше блоков col-4.
И да, у body есть свой серый бекграунд и он же является фоном секциям выше и ниже #qwe:

1 2 3
body { background: #333333; }

Пять способов скрыть элемент с помощью CSS

От автора: в CSS есть много различных способов сокрытия элементов. Можно установить opacity: 0, visibility: hidden, display: none или задать сверх большие значения при абсолютном позиционировании. Вы никогда не задумывались, зачем нужно столько много способов для одного и того же действия? Все методы почти не отличаются друг от друга, а существующие различия лишь указывают на то, какой из них и в каких обстоятельствах должен применяться. В этом уроке мы вам расскажем про мелкие отличия данных методов, на которые стоит обращать внимание.

Свойство opacity

С помощью свойства opacity задается прозрачность элемента. Данное свойство не изменяет границы элемента, т.е. если задать 0, то элемент будет скрыт только визуально. Элемент все так же будет занимать свое положение и пространство, влияя на расположение других элементов макета страницы. Кроме того, невидимый элемент будет отвечать на взаимодействие с ним.

opacity : 0 ;

Если вы хотите скрыть с помощью opacity элементы от скрин ридеров, то у вас это не получится. Элемент и весь его контент останутся видимыми для скрин ридеров, как и все остальные элементы на странице. То есть элемент ведет себя ровно так, как если бы он был видимым.

Также стоит отметить, что свойство поддается анимации, и с его помощью можно создавать поразительные эффекты. Элемент со свойством opacity меньшим 1задает новый контекст стека.

При наведении курсора на скрытый второй блок элемент плавно меняет свое состояние с полной прозрачности до полной непрозрачности. Блоку также задано свойство cursor: pointer, показывающее, что с ним можно взаимодействовать.

Свойство visibility

Следующее в нашем списке свойство visibility. Если установить значение hidden, то элемент будет скрыт. Как в случае со свойством opacity, скрытый с помощью данного свойства элемент не виден, но не стерт из макета страницы. Отличие от первого свойства в том, что данное свойство запрещает взаимодействовать со скрытым элементом. Также элемент будет скрыт от скрин ридеров.

Данное свойство также поддается анимации, можно менять первоначальное и конечное значения. Т.е. можно плавно анимировать свойство при помощи transition.

visibility : hidden ;

В демо ниже показана разница между visibility и opacity:

Обратите внимание на то, что дочерние элементы тега со свойством visibility: hidden могут быть видны, если им задать свойство visibility: visible. Проведите курсором внутри блока, но не доходя до цифры. Как видите, курсор не меняет свое значение на pointer. Также если кликнуть в этой области, то ничего не произойдет.

А вот тег

внутри захватывает все события мыши. При наведении курсора мыши на текст блок станет видимым и начнем также обрабатывать события.

Свойство display

Свойство display прячет элементы по-настоящему. Если установить элементу свойство display: none, то он не просто будет скрыт, не будет создана даже его блоковая модель. Данное свойство полностью скрывает элемент, будто его и не было. Также в таком случае с элементом нельзя никак взаимодействовать. Скрин ридерам будет не доступен контент скрытого элемента. Т.е. элемент как будто и не существовал.

Также будут скрыты все дочерние элементы. Свойство не поддается анимации, т.е. на него нельзя навесить плавные переходы.

Элемент остается доступным через DOM. Вы все так же можете манипулировать им, как и любым другим элементом.

display : none ;

Откройте вкладку CSS в демо ниже:

В коде видно, что у второго блока есть параграф, которому задано свойство display: block, но он все равно остается невидимым. В этом и есть разница между visibility: hidden и display: none. В первом случае если дочерним элементам задать свойство visibility: visible, то они станут видимыми. Во втором случае такой подход не работает. Все дочерние элементы остаются скрытыми независимо от их собственных значений свойства display.

Наведите пару раз курсор на первый блок. Событие hover выполняется? Если кликнуть на него, второй блок станет видимым. Счетчик во втором блоке должен показывать цифру, отличную от нуля. Блок скрыт от пользователя, но все еще доступен для взаимодействия через JS.

Свойство position

Представьте, что вам нужно создать такой элемент, чтобы с ним можно было взаимодействовать, но в то же время чтобы он не влиял на макет страницы. Ни одно из рассмотренных до сих пор свойств полностью не справлялось с этой задачей. В таком случае можно выдвинуть элемент за пределы видимой области. Элемент не будет влиять на макет, но останется доступным для взаимодействия. CSS код:

position : absolute ;
top : — 9999px ;
left : — 9999px ;

Демо ниже показывает работу абсолютного позиционирования. Принцип демо очень схож с предыдущим:

Основная задача тут это задать достаточно большие отрицательные значения свойств top и left, чтобы элемент ушел из видимой области просмотра. Плюс (или минус) в том, что при таком подходе контент внутри абсолютно спозиционированного элемента остается видимым для скрин ридеров. В принципе все логично, элемент просто отодвинут за пределы видимой области просмотра, чтобы пользователь не видел его.

Данную методику нельзя применять для сокрытия элементов, на которые можно поставить фокус. Курсор может перепрыгнуть непонятно куда, что может привести к непредсказуемым последствиям. Метод часто используется для создания пользовательских чекбоксов и радио кнопок.

Свойство clip-path

Еще один способ скрыть элемент – обрезать его. Раньше для этого было свойство clip. Оно устарело, и ему на смену появилось свойство clip-path.

Помните, что clip-path в демо ниже не полностью поддерживается в IE и Edge. Если использовать внешний SVG файл, поддержка становится еще более скудной (мы не стали использовать внешний файл). Для сокрытия элемента с помощью свойства clip-path используйте строку:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *