仍然存在白色部分和背景未覆盖所有背景的问题

发布于 2025-01-14 02:21:09 字数 4979 浏览 1 评论 0原文

仍然存在白色部分和背景未覆盖所有背景的问题，这是最简单的东西之一，我无法弄清楚，我一直在互联网上测试不同的代码和视频，并且可以'让它发挥作用。该网页只是一个索引，有 3 个按钮，数学、物理和化学（每个网页都还没有完成），3 个字体很棒的图标和 3 个不透明度为 0.5 的黑色图像，以及一个不在互联网上的背景，因为我在我的办公桌上编辑它。

代码位于 html 上：

<!DOCTYPE html>

<html>

<head>
    <script src="https://kit.fontawesome.com/18f289db08.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Last-Modified" content="0">
    <meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
    <meta http-equiv="Pragma" content="no-cache">
</html>
<meta name="author" content="Iván Camacho"/>
<meta charset="UTF-8" content="Iván Camacho"/>
<meta name="author" content="Iván Camacho"/>
<meta name="author" content="Iván Camacho"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<link rel="stylesheet" href="style.css">

<style>

body {
background-repeat: no-repeat;
background-size: contain;
background-attachment:local;
background-image: url("2022-03-08\ \(3\).png");
}

</style>

</head>
<body>

    <div class="Negro3">
        <img src="Fondo_Negro - copia.jpg" width="270" height="310">
        </div> 

<div class="Negro2">
    <img src="Fondo_Negro - copia (2).jpg" width="270" height="310">
     </div>    

<div class="Negro1">
<img src="Fondo_Negro.jpg" width="270" height="310">
</div>
    
<div class="superscript">
<i class="fa fa-superscript" style="font-size:60px;color:white;"></i>
</div>

<div class="calculator">
    <i class="fa fa-calculator" style="font-size:60px;color:white;"></i>
</div>

<div class="flask">
    <i class="fa fa-flask" style="font-size:60px;color:white;"></i>
</div>  

    <div class="Sciencestudio">
    <h1> Science studio </h1>
    </div>
<p>  <a href="https://google.es"> google link </a> <img src="https://www.google.com/search?q=imagen&rlz=1C1CAFB_enES711ES711&source=lnms&tbm=isch&sa=X&ved=2ahUKEwiBudns5aT2AhVDrxoKHVc9DR8Q_AUoAXoECAIQAw&biw=1242&bih=568&dpr=1.1#imgrc=GEeCSbujNt4WcM"/>  cuerpo </p>

<div class="Matemáticas"> <p2> <a href="file:///C:/Users/xtrem/OneDrive/Escritorio/TICO%20Web%20Iv%C3%A1n%20Camacho%20Moya/Matem%C3%A1ticas.html" style="color:aliceblue"> MATEMÁTICAS </a> </p2> </div>
<div class="FÍSICA"> <p2> <a href="file:///C:/Users/xtrem/OneDrive/Escritorio/TICO%20Web%20Iv%C3%A1n%20Camacho%20Moya/F%C3%ADsica.html" style="color:aliceblue"> FÍSICA </a> </p2> </div>
<div class="QUÍMICA"> <p2> <a href="file:///C:/Users/xtrem/OneDrive/Escritorio/TICO%20Web%20Iv%C3%A1n%20Camacho%20Moya/Qu%C3%ADmica.html" style="color:aliceblue"> QUÍMICA </a> </p2> </div>

</body>


</html>

CSS 代码为：

.Negro1{
    position:relative;
    bottom: 70px;
    left: 1550px;
    opacity: 0.5;
}

.Negro2{
    position:relative;
    top: 245px;
    left: 1225px;
    opacity: 0.5;
}

.Negro3{
    position:relative;
    top: 560px;
    left: 900px;
    opacity: 0.5;
}

.Sciencestudio{
    position:relative;
    left:60%;
    bottom:790px;
    font-size: 50px;
    color: azure;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.superscript{
    position:relative;
    left:169%;
    bottom:300px;
    scale: 3;
    color:aliceblue;
}

.calculator{
    position:relative;
    left:126.5%;
    bottom:350px;
    scale: 2.5;
}

.flask{
    position:relative;
    left:161%;
    bottom:405px;
    scale: 2.5;
}

.Matemáticas{
    position:relative;
    left:75.5%;
    bottom:630px;
    scale: 1.5;
    color: aliceblue;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
} 

.FÍSICA{
    position:relative;
    left:95%;
    bottom:650px;
    scale: 1.5;
    color: aliceblue;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.QUÍMICA{
    position:relative;
    left:112%;
    bottom:670px;
    scale: 1.5;
    color: aliceblue;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

原文

Still having problems with having white parts and background not covering all the background, it's one of the most simple stuff and I can't manage to figure it out, I've been testing out different codes and videos all over the internet and can't get it to work.
The webpage is just an index with 3 buttons, maths, physics and chemistry (each web aren't done yet), 3 font awesome icons and 3 black images with 0.5 opacity all along with a background that ISN'T on the internet because I edited it out in my desk.

The code is on the html:

<!DOCTYPE html>

<html>

<head>
    <script src="https://kit.fontawesome.com/18f289db08.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Last-Modified" content="0">
    <meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
    <meta http-equiv="Pragma" content="no-cache">
</html>
<meta name="author" content="Iván Camacho"/>
<meta charset="UTF-8" content="Iván Camacho"/>
<meta name="author" content="Iván Camacho"/>
<meta name="author" content="Iván Camacho"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<link rel="stylesheet" href="style.css">

<style>

body {
background-repeat: no-repeat;
background-size: contain;
background-attachment:local;
background-image: url("2022-03-08\ \(3\).png");
}

</style>

</head>
<body>

    <div class="Negro3">
        <img src="Fondo_Negro - copia.jpg" width="270" height="310">
        </div> 

<div class="Negro2">
    <img src="Fondo_Negro - copia (2).jpg" width="270" height="310">
     </div>    

<div class="Negro1">
<img src="Fondo_Negro.jpg" width="270" height="310">
</div>
    
<div class="superscript">
<i class="fa fa-superscript" style="font-size:60px;color:white;"></i>
</div>

<div class="calculator">
    <i class="fa fa-calculator" style="font-size:60px;color:white;"></i>
</div>

<div class="flask">
    <i class="fa fa-flask" style="font-size:60px;color:white;"></i>
</div>  

    <div class="Sciencestudio">
    <h1> Science studio </h1>
    </div>
<p>  <a href="https://google.es"> google link </a> <img src="https://www.google.com/search?q=imagen&rlz=1C1CAFB_enES711ES711&source=lnms&tbm=isch&sa=X&ved=2ahUKEwiBudns5aT2AhVDrxoKHVc9DR8Q_AUoAXoECAIQAw&biw=1242&bih=568&dpr=1.1#imgrc=GEeCSbujNt4WcM"/>  cuerpo </p>

<div class="Matemáticas"> <p2> <a href="file:///C:/Users/xtrem/OneDrive/Escritorio/TICO%20Web%20Iv%C3%A1n%20Camacho%20Moya/Matem%C3%A1ticas.html" style="color:aliceblue"> MATEMÁTICAS </a> </p2> </div>
<div class="FÍSICA"> <p2> <a href="file:///C:/Users/xtrem/OneDrive/Escritorio/TICO%20Web%20Iv%C3%A1n%20Camacho%20Moya/F%C3%ADsica.html" style="color:aliceblue"> FÍSICA </a> </p2> </div>
<div class="QUÍMICA"> <p2> <a href="file:///C:/Users/xtrem/OneDrive/Escritorio/TICO%20Web%20Iv%C3%A1n%20Camacho%20Moya/Qu%C3%ADmica.html" style="color:aliceblue"> QUÍMICA </a> </p2> </div>

</body>


</html>

And the CSS code is:

.Negro1{
    position:relative;
    bottom: 70px;
    left: 1550px;
    opacity: 0.5;
}

.Negro2{
    position:relative;
    top: 245px;
    left: 1225px;
    opacity: 0.5;
}

.Negro3{
    position:relative;
    top: 560px;
    left: 900px;
    opacity: 0.5;
}

.Sciencestudio{
    position:relative;
    left:60%;
    bottom:790px;
    font-size: 50px;
    color: azure;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.superscript{
    position:relative;
    left:169%;
    bottom:300px;
    scale: 3;
    color:aliceblue;
}

.calculator{
    position:relative;
    left:126.5%;
    bottom:350px;
    scale: 2.5;
}

.flask{
    position:relative;
    left:161%;
    bottom:405px;
    scale: 2.5;
}

.Matemáticas{
    position:relative;
    left:75.5%;
    bottom:630px;
    scale: 1.5;
    color: aliceblue;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
} 

.FÍSICA{
    position:relative;
    left:95%;
    bottom:650px;
    scale: 1.5;
    color: aliceblue;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.QUÍMICA{
    position:relative;
    left:112%;
    bottom:670px;
    scale: 1.5;
    color: aliceblue;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

分享到QQ

分享到微博