相对创建的按钮和图像会导致为图像创建额外的框架。 html

Question

我无法移除边框。

这是我的代码：

<mat-grid-list cols="2" rowHeight="2:1">
   <mat-grid-tile>
     <button mat-raised-button>1</button>
     <img id="image-diamond"/>
   </mat-grid-tile>
</mat-grid-list>

还有css：

button{
width: 80%;
height: 70%; 
padding: 20px 40px;
font-size: 32px;
font-family: Arial, sans-serif;
display: inline-block;
background: linear-gradient(to right, #070600 0%, #f7d931f3 50%, #fae901f3 50%, #f7ef8bf3 100%);
background-size: 200% 100%;
background-position: 100% 0;
transition: background-position 0.3s;
opacity: 70%;
border: 1px solid #f00;
position: relative;
z-index: 1;
}

#image-diamond{
height: 20%;
width: 10%;
margin-top: 35%;
position: relative;
z-index: 2;
right: 5%;
overflow:hidden; 
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

并且图像有额外的边框。设置背景透明或边框没有任何变化。在 0px 上设置粗 也没有改变任何东西，当创建边框时，第二个边框仍然可见，我可以看到 2 个边框。

当我设置border: 2px solid red; 时，我可以看到白色和红色边框。

Answer 1

您无法更改它，这是默认浏览器行为。

就像当图像具有 invalid src 并且浏览器显示“损坏的图像”图标时，如果图像具有 no src 浏览器显示显示图像位置的边框。有关详细信息，请参阅：

• How can I remove the border around an image without a source?
• Strange border on IMG tag

您似乎想要设置背景图片 - 为此，您不使用img 元素，您可以使用其他一些元素，例如div，例如

<div class="image-with-background"></div>

.image-background {
  height: 100px;
  width: 100px;
  background-image: url("https://lorempixel.com/output/technics-q-c-600-400-1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

请看下面的例子：

.empty-img {
  height: 100px;
  width: 100px;
}

.image-background {
  height: 100px;
  width: 100px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.background-url {
  background-image: url("https://lorempixel.com/output/technics-q-c-600-400-1.jpg");
}

<p>A "broken image" img element with no src: </p>
<img class="empty-img" />

<p>A div element tag with no backgrouund image, but using your background CSS -> no border: </p>
<div class="image-background"></div>

<p>A div element tag with a background image: </p>
<div class="image-background background-url"></div>

Answer 2

试试这个

img {
  text-indent: -999px;
}

Answer 3

使用 border:none;

都喜欢

   button{
border:none;
}
    
#image-diamond{
border:none;
}

Answer 4

在button标签中添加border: 0;和outline: none; - （去除黑色边框）到css

button{
width: 80%;
height: 70%; 
padding: 20px 40px;
font-size: 32px;
font-family: Arial, sans-serif;
display: inline-block;
background: linear-gradient(to right, #070600 0%, #f7d931f3 50%, #fae901f3 50%, #f7ef8bf3 100%);
background-size: 200% 100%;
background-position: 100% 0;
transition: background-position 0.3s;
opacity: 70%;
border: 1px solid #f00;
position: relative;
z-index: 1;
border: 0;
outline: none;
}

#image-diamond{
height: 20%;
width: 10%;
margin-top: 35%;
position: relative;
z-index: 2;
right: 5%;
overflow:hidden; 
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

<mat-grid-list cols="2" rowHeight="2:1">
   <mat-grid-tile>
     <button mat-raised-button>1</button>
     <img id="image-diamond"/>
   </mat-grid-tile>
</mat-grid-list>