HTML页面上的白点
[英]White spot on my HTML page
问题描述
I'm making a random website but & my problem is that there's this white spot on top of the page that's also interfering with how the background is supposed to look. 
我正在创建一个随机网站，但我的问题是页面顶部有一个白色斑点，这也干扰了背景的外观。 Why's this happening? 为什么会这样呢？ I cannot find anything that's causing this happen. 我找不到引起这种情况的任何东西。 Below the code is as follows. 下面的代码如下。 JS > CSS > HTML. JS> CSS> HTML。
Thanks for taking the time to read. 感谢您抽出宝贵的时间阅读。
JS > CSS > HTML is how JS> CSS> HTML是如何
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".pull-me").click(function() { $(".panel").slideToggle("slow"); }); }); $(document).ready(function() { $(".pull-me2").click(function() { $(".panel2").slideToggle("slow"); }); });
<style type="text/css"> html { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-image: url("http://i64.tinypic.com/2jdn8lw.jpg"); } #mainHeader { text-shadow: -14px 3px 10px; font-size: 85px; font-family: cursive; } .1 { height: 10px; } .panel { text-align: center; display: none; } .panel2 { text-align: center; display: none; } .pull-me { text-align: center; font-family: sans-serif; font-size: 30px; color: black; } .pull-me2 { text-align: center; font-family: sans-serif; font-size: 30px; } .pull-me3 { text-align: center; font-family: sans-serif; font-size: 30px; } #ig { height: 30px; } .menu { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-image: url("http://i64.tinypic.com/2hozok4.jp"); background-repeat: no-repeat; font-family: cursive; width: -500px; } </style>
<header> <h1 class="text-center" id="mainHeader">Random Website</h1> <a href="https://www.instagram.com/piccolo_villagio/" ><img id="ig" src="http://www.logosurfer.com/sites/default/files/styles/large/public/instagram-logo_0.png?itok=ujucvqfJ" height = "20px"></a> <div class="panel"> <img class="1 img-responsive" src="http://i64.tinypic.com/scrp6h.jpg" width="324"></a> <h3>500</h3> <img class="1 img-responsive" src="http://i68.tinypic.com/2h7qbn4.jpg" width="324"></a> <br/> <br/> </div> <div class="pull-me">Scroll Menu 1</div> </header> <!-- Entering body below --> <body> <div class="panel2"> <div class="menu"> </div> <br/> <br/> </div> <div class="pull-me2">Scroll Menu 2</div> </body>
2 个解决方案
解决方案1
1 已采纳 2016-10-08 20:02:07
The background is white because of the bootstrap.css . 由于bootstrap.css ，背景为白色。
Just comment out the background-color: #fff line in scaffolding.less file 只需注释掉scaffolding.less文件中的background-color: #fff行
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
/* background-color: #fff; */
}
or you can add the code below to your .css file 或者您可以将以下代码添加到您的.css文件中
body {
background-color: transparent!important;
}
Here is the updated version: https://jsfiddle.net/oj91Lb1d/2/ 这是更新的版本： https : //jsfiddle.net/oj91Lb1d/2/
By the way, <header> tags should be inside the <body> tags. 顺便说一句， <header>标记应位于<body>标记内。 Most probably, you confused it with the <head> tags. 您很可能将其与<head>标记混淆了。 Besides that, there are two </a> tags, which supposed to include the <img/> tags but there were no opening <a href="#"> tags. 除此之外，还有两个</a>标记，应该包含<img/>标记，但是没有打开的<a href="#">标记。
解决方案2
0 2016-10-08 19:59:51
You could check again moving your <body> tag up, since you are using it after the <header> tag. 您可以再次检查向上移动<body>标记，因为您正在<header>标记之后使用它。 <body> should wrap everything on the html part. <body>应该将所有内容包装在html部分。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.