我想有两个按钮中心在中间,有一个图片作为背景。 为此,我把它们放在一张桌子上。 我见过一些在它们之间添加一些空间的方法,但由于背景的原因,似乎没有一种方法在这里奏效。
这是我到目前为止的页面:https://jsfiddle.net/ulhc10zk/1/
null
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>
null
我想要的是这样的东西
还有,有没有办法去掉图片周围的边框呢?
请对我轻点,我是个完全的初学者
null
button {
display: inline-block;
height: 300px;
margin-right: 15px;
vertical-align: top;
width: 300px;
border-width: 0px;
}
#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>
null
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>