我怎樣才能擺脫 bg 圖像周圍不需要的邊框？
[英]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;
}
先感謝您。
3 個解決方案
解決方案1
0 2021-05-12 10:25:35
如果你在談論邊距，你只需要在你的“body，html”樣式中添加“*”。 這消除了 dom 中所有元素的邊距/填充。
body, html, * {
height: 100%;
color: #cccccc;
text-align: center;
margin: 0;
padding: 0;
}
解決方案2
0 已采納 2021-05-12 10:35:23
使用下面的代碼將消除所有問題，在使用 '*' 選擇器時，它將應用於 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
可能是您缺少添加 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.