Блог

Я создал сетку с несколькими изображениями, и, как вы можете видеть в CSS ниже, я использовал свойство «фоновое изображение», а не тег «img» в HTML. Я хочу иметь возможность щелкнуть по этим изображениям, чтобы открыть веб-страницу, но из проведенного мной исследования следует, что я могу связать изображение только с помощью тега привязки, для чего мне потребуется использовать тег img в HTML. Я уже выложил саму сетку, поэтому теперь мне нужно знать, какой CSS мне понадобится, чтобы поместить каждое изображение в соответствующее поле сетки (затем я могу вернуться и добавить теги anchor/img в свой HTML). Пожалуйста, обратите внимание, что я очень новичок в кодировании и не имею никакого опыта или курсовой работы, поэтому у меня, вероятно, много ошибок в приведенном ниже коде. Пожалуйста, будь со мной помягче.

Также, если кто-нибудь может предоставить правильный CSS, чтобы сетка соответствовала моему экрану, это было бы потрясающе. В настоящее время у меня установлена высота 717 пикселей, потому что это то, что подходит для моего личного экрана, но, очевидно, у других людей экраны другого размера.

 .layout{
  display: grid;
  width:100%;
  height: 717px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  text-align: center;
  padding: 5px;
}

.color {
  transition-property: background-color;
}

.color:hover{
  background-color: white;
}

.box{
  width: 100%;
}

.a{
  color: white;
  background-color: #D3D3D3;
  grid-column: 1 / span 2;
  grid-row: 1 / span 3;
  background-image: url(https://dlcdnwebimgs.asus.com/gain/E11F9021-A684-4848-98D6-6DB2841EDE5D);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
} 

 <div class="layout">
      <div class="box a color">a</div>
      <div class="box b color">b</div>
      <div class="box c color">c</div>
      <div class="box d color"></div>
      <div class="box e color">e</div>
      <div class="box f color">f</div>
      <div class="box g color">g</div>
      <div class="box h color">h</div>
      <div class="box i color">i</div>
      <div class="box k color">k</div>
      <div class="box l">Computer Parts</div>
      <div class="box m color">m</div>
      <div class="box o color">o</div>
      <div class="box p color">p</div>
      <div class="box q color">q</div>
    </div> 

Тег div не является наиболее подходящим для ссылок. Вместо этого используйте тег с атрибутом href следующим образом:

 <a class="box" href="http://example.com">text</a>
 

На самом деле не очень часто используется свойство background для установки изображения для ссылки вместо элемента img. Для этого должна быть веская причина