如何使用没有白色边框的CSS居中图像

Question

如何使用没有白色边框的CSS居中图像

这是我的CSS和HTML代码.我想在中心放置一个图像,除了图像周围有一个奇怪的白色边框外,这样可以工作.我曾尝试border:none;和border:0;

HTML:

<!DOCTYPE html>
<html>

<head>
<title>Food.</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="icon" type="image/png" href="favicon.ico">

</head>


<body>
<img border="0" id="image" class="centered" />

</body>

</html>

Run Code Online (Sandbox Code Playgroud)

CSS:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -182px;
  margin-left: -153px;

}

img#image{
   /*I think this is where the issue is caused*/
    width:337px;
    height:219px;
    background-image: url('soon_comp.png');
    background-color: transparent;
}


body {
    outline: none;
    background-color: rgb(15,15,30);
    border-color:transparent;
    border:0px;
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Alc*_*iar 9

我不知道你为什么要为img标签设置背景图片,我宁愿使用div或span标签.但是,如果您真的想这样做,请尝试添加到您的img #image CSS规则:

img#image{
  content: '';
  ...
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，10 月前
查看次数：	10850 次
最近记录：	9 年，9 月前