Як замінити посилання на зображення в CSS?

Як замінити посилання на зображення в CSS?

Як перетворити зображення на посилання в HTML?

  1. Щоб зробити зображення доступним для натискання в HTML, оберніть тег <img> у тег <a> з атрибутом href. …
  2. У цьому прикладі ми робимо зображення доступним для натискання, перенаправляючи користувачів на geeksforgeeks.org після натискання. …
  3. У цьому прикладі ми створюємо стильове посилання на зображення, яке можна натиснути.

Користуватися просто — ви вставте шлях до зображення, яке ви хочете включити на свою сторінку, у дужках url() , наприклад: background-image: url('images/my-image. png'); Примітка щодо форматування: URL-адресу можна взяти в одинарні або подвійні лапки, і вони необов’язкові.

Щоб замінити текст зображенням логотипу, використовуйте негативне значення текстового відступу (це має бути досить велике значення, як показано нижче) і вставте зображення за допомогою фону: url(). Переконайтеся, що ви також визначили ширину та висоту, інакше зображення не відтворюватиметься.

Зображення як посилання Додавши тег <img> у тег <a> браузер бачить, що зображення має бути доступним для натискання. Ви перетворили зображення на посилання! Якщо ви використовуєте WordPress, ви можете додати цей HTML-код на свою сторінку за допомогою текстового перегляду в редакторі сторінок.

Ще один спосіб зробити зображення доступним для натискання, якщо ви вже визначили ідентифікатор у CSS (як у OP), це by передаючи його як атрибут id у тегу <a>. Отже, у коді OP використання атрибута id із тегом <a> замість тегу <div> робить зображення доступним для натискання.