我怎样才能摆脱 bg 图像周围不需要的边框？
[英]how can i get rid of an unwanted border around bg image?
问题描述
having issues identifying/getting rid of a border around my full screen background image, or finding an alternative for its code that won't cause this problem.
在识别/消除我的全屏背景图像周围的边框时遇到问题，或者为其代码找到不会导致此问题的替代方案。 sorry, very beginner.对不起，非常初学者。
here is my HTML这是我的 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>
here is the css这是 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;
}
thank you in advance.先感谢您。
3 个解决方案
解决方案1
0 2021-05-12 10:25:35
If you're talking about the margin, you just need to add "*" to your "body, html" styling.如果你在谈论边距，你只需要在你的“body，html”样式中添加“*”。 This gets rid of the margin/padding for all elements in the dom.这消除了 dom 中所有元素的边距/填充。
body, html, * {
height: 100%;
color: #cccccc;
text-align: center;
margin: 0;
padding: 0;
}
解决方案2
0 已采纳 2021-05-12 10:35:23
Use below code it will remove all problem, on using '*' selector it will apply to all the elements in the DOM.使用下面的代码将消除所有问题，在使用 '*' 选择器时，它将应用于 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;
}
解决方案3
0 2021-05-12 10:45:59
May be you are missing to add box-sizing property.可能是您缺少添加 box-sizing 属性。
At the top of your CSS file add this...在 CSS 文件的顶部添加此...
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Then add separately然后单独添加
html, body{
margin: 0;
padding: 0;
height: 100%;
color: #cccccc;
text-align: center;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.