表背景颜色给色的边界幻觉

Question

我试图摆脱桌面细胞周围的蓝色边框。颜色与表格单元格的背景颜色相同;我希望图像占据整个单元格，但无法找到摆脱这些看起来像边界的线条的方法。我们的想法是通过悬停在一个单元格上来使背景透视。我链接到此jsfiddle中的整个表格，但下面是一段代码。

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

将form添加到padding: 0，将td添加到display: block;，就像这样

Updated fiddle

img

示例代码段

＆＃13;

＆＃13;

.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;
}

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;