[英]how can i get rid of an unwanted border around bg image?
在识别/消除我的全屏背景图像周围的边框时遇到问题,或者为其代码找到不会导致此问题的替代方案。 对不起,非常初学者。
这是我的 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;
}
先感谢您。
如果你在谈论边距,你只需要在你的“body,html”样式中添加“*”。 这消除了 dom 中所有元素的边距/填充。
body, html, * {
height: 100%;
color: #cccccc;
text-align: center;
margin: 0;
padding: 0;
}
使用下面的代码将消除所有问题,在使用 '*' 选择器时,它将应用于 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;
}
可能是您缺少添加 box-sizing 属性。
在 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.