表背景颜色给人彩色边框的错觉。

Question

我在试着去掉我桌子上的蓝色边框。该颜色与表格单元格的背景色相同；我希望图像占据整个单元格，但无法找到消除这些看起来像边框的线条的方法。这样做的目的是通过悬浮在细胞上使背景清晰。我链接到这个小提琴中的整个表，但是下面是一个代码片段。

CSS

.samples td{
    text-align: center;
    width: 30%;
    height:300px;
    position:relative;
    table-layout: fixed;
    background-color: rgb(0,300,300);
    border: 1px solid black;
    box-shadow: 0 0 0 2px #fff;

Answer 1

将padding: 0添加到td，将display: block;添加到img，如下所示

更新小提琴

.samples td {
    text-align: center;
    width: 30%;
    height:300px;
    position:relative;
    table-layout: fixed;
    background-color: rgb(0,300,300);
    box-shadow: 0 0 0 2px #fff;
    padding: 0;
}
.samples td img{
    display: block;
    width: 100%;
    height:400px;
    z-index: 50;
}

样本片段

​

.samples {
	width: 100%;
	background-color: white;
	z-index:50;
}
.samples table{
	position: relative;
	width: 100%;
}
.samples td {
	text-align: center;
	width: 30%;
	height:300px;
	position:relative;
	table-layout: fixed;
	background-color: rgb(0,300,300);
	box-shadow: 0 0 0 2px #fff;
  padding: 0;
}
.samples td img{
  display: block;
	width: 100%;
	height:400px;
	z-index: 50;
}
.samples td:hover img{
	opacity: .5;

}
.samples p{
	margin: 0;
	position:absolute;
	left: 0;
	top: 50%;
	right:0;
	color: #fff;
	font-size: 20px;
	text-align: center;
	z-index:10;

}
.samples td:hover p{
	visibility: visible;
}
.samples td p{
	visibility: hidden;
}

<div class="samples">
  <table>
    <th>Pokemon</th>
    <tr>
      <td>
        <p>Go Mustangs! Unfortunately, there's not much to cheer for...</p>
        <img src = "http://walnuthighschoolfootball.com/wp-content/uploads/2013-Clare_IMG_0257.jpg">
      </td>
      <td>
        <p>Hiking on Walnut's hilly Schabarum trail is a change from the Evanston pancake metropolis!</p>
        <img src = "http://nobodyhikesinla.files.wordpress.com/2011/04/hiking-2011-4-236.jpg">
      </td>

      <td>
        <p>Orange you hungry for a tangerine? Give me three and I'll give you a show</p>
        <img src = "http://juicyjuicevapor.com/wp-content/uploads/2015/07/tangerines.jpg">
      </td>
    </tr>
    <tr>
      <td>
        <p>My favorite place to nap</p>
        <img src = "https://upload.wikimedia.org/wikipedia/commons/4/4e/Deering_Library_detail_Northwestern.jpg">
      </td>
      <td>
        <p>As a NU Quidditch beater/chaser, I enjoy dodging balls and scoring through hoops.</p>
        <img src = "https://pbs.twimg.com/profile_images/513804815088885761/08UB6aL2.jpeg">
      </td>
      <td>
        <p>Have never played a game as great as Last of Us. The graphics are so realistic, and online multiplayer mode is v fun.</p>
        <img src = "http://media.aintitcool.com/media/uploads/2013/nordling/thelastofus.jpg">
      </td>
    </tr>

  </table>
</div>

​