Как сделать мой , на который можно связать фоновое изображение?

#html

#HTML

Вопрос:

 <tbody>
             <tr>
                   <td valign="top" align="center" bgcolor="#3f76bf" style="background-position: center; background-size: cover; border-radius: 6px; background-color: #3f76bf; background-image: url('https://mcusercontent.com/73b8e8571a2f854d4f817a5c8/images/1a986052-d10d-4bf7-890f-133862bc982f.png')" background="https://mcusercontent.com/73b8e8571a2f854d4f817a5c8/images/1a986052-d10d-4bf7-890f-133862bc982f.png">

Я хотел бы сделать изображение в теге td гиперссылкой, никогда не думал, что потрачу 5 часов на этот простой вопрос. Кажется, я не могу просто обернуть в тег. Я так расстроен и благодарен за вашу помощь.

1. Почему бы не добавить ссылку и не указать ее в качестве фона вместо td ?

2. src не будет работать на a td и an onclick — это просто плохая практика и недоступно

3. Вы не можете обернуть td с a помощью . Если изображение должно быть интерактивным, оно должно быть частью вашего документа через img тег, А НЕ фоновое изображение.

4. Если вы используете table макет for во всем, кроме HTML-письма, вы делаете это неправильно.

5. Ах, это имеет больше смысла, но вы действительно должны использовать <td><a href=''><img src></a></td> . Также, чтобы такие люди, как я, не прыгали вам в глотку за использование таблиц для макета, вы должны упомянуть в своем вопросе, что это электронное письмо в формате HTML 🙂

Ответ №1:

Я написал более семантический способ делать то, что вы делаете. Конечно, я не знаю, как выглядит остальная часть вашего кода, и вам, возможно, придется что-то изменить. Как правило, не рекомендуется использовать таблицы для компоновки. Но я не знаю, как вы его используете, поэтому я оставляю его как есть.

(Таблицы должны использоваться только для табличных данных)

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

 <table>
  <tbody>
    <tr>
      <td style="text-align: center;background-color: #3f76bf;">
        <a href="https://yoururl.tld">
          <img style="max-width: 100%;" src="https://mcusercontent.com/73b8e8571a2f854d4f817a5c8/images/1a986052-d10d-4bf7-890f-133862bc982f.png" alt="Describe the content of the image for someone who can't see the image">
        </a>
      </td>
    </tr>
  </tbody>
</table>

Обновить

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

 /* Ignore this CSS completely for your example */
/* It's just here for the example in SO to look nice */
td {
  width: 100px;
  height: 200px;
}

 <table>
  <tbody>
    <tr>
      <td
        valign="top"
        align="center"
        bgcolor="#3f76bf"
        style="
          position: relative;
          background-position: center;
          background-size: cover;
          border-radius: 6px;
          background-color: #3f76bf;
          background-image: url('https://mcusercontent.com/73b8e8571a2f854d4f817a5c8/images/1a986052-d10d-4bf7-890f-133862bc982f.png');
        "
        background="https://mcusercontent.com/73b8e8571a2f854d4f817a5c8/images/1a986052-d10d-4bf7-890f-133862bc982f.png"
      >
        <a href="https://yoururl.tld" style="
          position: absolute;
          top: 0;
          right: 0;
          botom: 0;
          left: 0;
        ">
        </a>
      </td>
    </tr>
  </tbody>
</table>

1. Спасибо! В основном это работает (очень рад видеть), но, как вы можете видеть here:imgur.com/a/QFuM6G2 . по какой-то причине это делает изображение меньше, чем оно должно быть

2. Теперь я понимаю, почему они использовали фоновые изображения. Они хотят, чтобы они были в сетке и одинакового размера, и с удовольствием обрезают их с обеих сторон для аскетов…

3. @Chucky787 Я добавил для вас еще один пример, который может быть ближе к вашему варианту использования. Надеюсь, это сработает. Не стесняйтесь отмечать этот ответ, если он есть.

Ответ №2:

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

 <td><a href="#"><span>CLICK ME DON KICK ME</span></a></td>

Если span не работает, попробуйте использовать элемент или .