如何使用img标签删除白色边框

时间:2016-10-22 19:13:37

标签: html css image css3

我无法找到解决方案。

Problem

如何删除三角形周围的白色边框?

代码:

.triangle{
    background: url('/img/triangle.png');
    background-size: cover;
    width: 15px;
    height: 15px;
    margin:0px;
    padding:0px;
    border: none;
}

<img class="triangle" />

3 个答案:

答案 0 :(得分:4)

您的加价无效。白色边框来自您的浏览器未找到图像可视化。要更正标记,请为图片本身设置src属性(必须为see MDN):

<img src="/img/triangle.png" />

或用具有给定背景属性的div替换它,如下所示:

.triangle {
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Black_triangle.svg/2000px-Black_triangle.svg.png');
  background-size: cover;
  width: 15px;
  height: 15px;
  margin: 0px;
  padding: 0px;
  border: none;
}
<div class="triangle"></div>

答案 1 :(得分:1)

如果您要使用img标签执行此任务

<img class="triangle" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Black_triangle.svg/2000px-Black_triangle.svg.png" />

它应该解决你的问题......否则就完全做了但是把img标签变成了div。

答案 2 :(得分:0)

我还会研究“轮廓”和“轮廓颜色”属性,以便对其进行样式设置或使其消失。

以下是更多信息:
http://www.w3schools.com/cssref/pr_outline-color.asp http://www.w3schools.com/cssref/pr_outline.asp