我怎样才能摆脱 bg 图像周围不需要的边框？

Question

遇到问题 identifying/getting 消除我的全屏背景图像周围的边框，或者找到不会导致此问题的替代代码。抱歉，初学者。

这是我的HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="/favicon.ico?v=2" type="image/x-icon"/>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
    <title>xx</title>
  </head>
  <body>
  <div class="bg">

    <p>content</p>

</div>
  </body>
</html>

这里是 css

body, html {
    height: 100%;
    color: #cccccc;
    text-align: center;
    margin: 0;
    padding: 0; 
  }
  
  .bg {
    /* The image used */
    background-image: url("bg.jpg");
  
    /* Full height */
    height: 100%; 
  
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

提前致谢。

Answer 1

如果您谈论的是边距，则只需在“正文，html”样式中添加“*”。这消除了 dom.

中所有元素的 margin/padding

body, html, * {
height: 100%;
color: #cccccc;
text-align: center;
margin: 0;
padding: 0;
}

Answer 2

使用下面的代码将消除所有问题，在使用“*”选择器时它将应用于 DOM.

中的所有元素

*{
    padding: 0;
    margin: 0;
}
body, html {
    height: 100%;
    color: #cccccc;
    text-align: center;
}

.bg {
    /* The image used */
    background: blue;

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Answer 3

可能是您缺少添加框大小调整属性。

在 CSS 文件的顶部添加此...

*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

然后单独添加

html, body{
    margin: 0;
    padding: 0; 
    height: 100%;
    color: #cccccc;
    text-align: center;
  }

我怎样才能摆脱 bg 图像周围不需要的边框？

how can i get rid of an unwanted border around bg image?

html

css

background