Как добавить интервал между столбцами с изображениями в качестве фона в таблице - PullRequest
1 голос
/ 17 июня 2020

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

Вот моя страница: https://jsfiddle.net/uLhc10zk/1/

button {
  display: inline-block;
  height: 300px;
  padding: 0;
  margin: 0;
  vertical-align: top;
  width: 300px;
}

#close-CSS {
  background-image: url("https://s.yimg.com/uu/api/res/1.2/DdytqdFTgtQuxVrHLDdmjQ--~B/aD03MTY7dz0xMDgwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://media-mbst-pub-ue1.s3.amazonaws.com/creatr-uploaded-images/2019-11/7b5b5330-112b-11ea-a77f-7c019be7ecae");
  background-size: 300px 300px;
  height: 300px;
  width: 300px;
}

.wrapper {
  text-align: center;
  display: table;
  top: 50%;
  left: 50%;
  margin: auto;
}
<center>Test Page</center>
<br>
<br>
<br>
<div class="wrapper">
  <button id="close-CSS" ; onclick="window.location.href = 'about:blank';">Site1</button>
  <button id="close-CSS" ; onclick="window.location.href = 'about:blank';">Site2</button>
</div>

я хочу что-то вроде этого

enter image description here

также есть способ избавиться от границы вокруг картинок?

Пожалуйста, go полегче, я полный новичок

1 Ответ

4 голосов
/ 17 июня 2020

button {
  display: inline-block;
  padding: 0;
  margin: 0;
  vertical-align: top;
  width: 300px;
  border: 0px;
  margin: 15px;
}
    
#close-CSS {
  background-image: url( "https://s.yimg.com/uu/api/res/1.2/DdytqdFTgtQuxVrHLDdmjQ--~B/aD03MTY7dz0xMDgwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://media-mbst-pub-ue1.s3.amazonaws.com/creatr-uploaded-images/2019-11/7b5b5330-112b-11ea-a77f-7c019be7ecae" );
  background-size: 300px 300px;
  height: 300px;  
  width: 300px;
}

.wrapper {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  left: 50%;
  margin: auto;
}
<center>Test Page</center>
<br>
<br>
<br>
<div class="wrapper">
  <button id="close-CSS"; onclick="window.location.href = 'about:blank';">Site1</button>
  <button id="close-CSS"; onclick="window.location.href = 'about:blank';">Site2</button>
</div>

Надеюсь, это поможет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...