首页 / 技术问答 / Html问答列表 / 问答详情

Html 如何将背景图像放置在窗口的最顶部

我是html/css的初学者，我正在操作其他人已经创建的html页面. 我无法让背景图像粘在窗口顶部. 我try 过一些背景、背景图像、位置和 colored颜色 的方法，但都不起作用. 我已经设置了"background-Color:white;"来try 解决我的问题，但在这种情况下，我遇到了另一个问题.用作背景的图像的蓝色不会一直延伸到底部，最终得到了我不想要的白色背景.

白色背景:

"background-Color:#1f5a86"看起来是什么样子:

我的背景图片:

Here are my css lines for the body :

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
  background-image: url("https://i.sstatic.net/7oF46gQe.png");
  background-repeat: no-repeat;
  background-position: top;
  background-color: white;
}
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Blabla</title>
  <link href="Style_blabla.css" rel="stylesheet" media="all" type="text/css">
  <script type="text/javascript">
    function MM_preloadImages() { //v3.0
      var d = document;
      if (d.images) {
        if (!d.MM_p) d.MM_p = new Array();
        var i, j = d.MM_p.length,
          a = MM_preloadImages.arguments;
        for (i = 0; i < a.length; i++)
          if (a[i].indexOf("#") != 0) {
            d.MM_p[j] = new Image;
            d.MM_p[j++].src = a[i];
          }
      }
    }
  </script>
  <link type="text/css" rel="stylesheet" href="file:///directory/Style_blabla.css">
  <link type="text/css" rel="stylesheet" href="file:///directory/SpryCollapsiblePanel.css">
  <link type="text/css" rel="stylesheet" href="SpryAssets/SpryCollapsiblePanel.css">
  <link type="text/css" rel="stylesheet" href="Liste_deroulante.css" title="Liste_deroulante">
</head>

<body>
  <div class="difusion" style="position: static; width: 220px;"><b>DIFUSION
        </b></div>
  <table class="tableauTitre" style="width: 1128px; height: 138px;" cellspacing="0" cellpadding="0" border="0">
    <tbody id="2" class="Tbleau_onglet">
      <tr>
        <td width="200"><br>
        </td>
        <td width="650"><a href="BlablaTheme.html"><strong></strong></a><strong><a

                name="haut"></a></strong>
          <a href="Blabla_Accueil.html"><img style="border: 0px solid ; width: 810px; height: 120px;" src="Titre_03.png"></a>
        </td>
      </tr>
    </tbody>
  </table>
  <nav>
    <ul>
      <li class="Deroulant"><a href="#">Accueil  </a>
        <ul class="sous">
          <li><a href="#">Thèmes</a></li>
          <li><a href="#">Domaines</a></li>
          <li><a href="#">Liste</a></li>
        </ul>
      </li>
      <li class="NonDeroulant"><a href="#">Institut  </a> </li>
      <li><a href="#">Catalogues</a></li>
      <li><a href="#" width:="130%">Diffusion</a></li>
      <li><a href="#">Contacts</a></li>
      <li><a href="#">Glossaire</a></li>
    </ul>
  </nav>
</body>

</html>

感谢你的帮助.

推荐答案

判断代码

如果我删除多余的内容并仅关注背景图像，为了防止图像拉伸，我将其设置为一个屏幕宽、一个屏幕高.经过这次调整，我们仍然会在背景周围经历余量:这在original photo上作为"透明"区域存在.

photo from transparent part

body {
  margin: 0; /* Remove default margin from body. */
  height: 200vh; /* Just for test code. */
  background-image: url("https://i.sstatic.net/7oF46gQe.png"); /* The margin you see now is also present on the original image. Check it yourself by opening the image URL in a new tab. */
  background-repeat: no-repeat;
  background-position: top; /* You can place the background image on top like this. */
  background-size: 100%;
  background-color: #205b87; /* Since we don't want to stretch the image, when it ends, we continue with the blue background. I would note that I would initially scale down the background image to include only the white part. */
}

我没有删除 comments 中的透明部分，但如果你这样做，被批评的"蓝线"就会消失.

然而，在下面的示例中(使用较小的照片)，我已经删除了这些透明部分.

使用较小的背景照片

我不会在背景中包括蓝色部分，从而使图像不必要地变大.让我们仅裁剪出背景图像的白条.通过这种方式，我们可以缩小/优化图像大小.剩余区域可以填充 colored颜色 代码.

new bg

body {
  margin: 0; /* Remove default margin from body. */
  height: 200vh; /* Just for test code. */
  background-image: url("https://i.sstatic.net/JfKr5n32.png");
  background-repeat: no-repeat;
  background-position: top; /* You can place the background image on top like this. */
  background-size: 100%;
  background-color: #205b87;
}

使用JPEG而不是照片

我将使用JPEG来代替新获得的背景图像.VG的优点是，无论您放大多少，它始终都会提供清晰的图像.您需要用JPEG实现白色部分，然后将其放置在页面顶部.

使用HTML元素

由于背景的独特特征只是突出的白色半圆，因此考虑仅使用HTML和CSS实现这一点很有趣.有两部分:

  1. 背景色为白色的标题.在此，需要一个额外的分区，格式为白圆圈，位置适当.
  2. 满足于蓝色背景色.(或者只需将背景色设置为body而不是新的迪夫)

* {
  --circle-width: 200px;
}

body {
  margin: 0;
  height: 200vh;
  background-color: #205b87;
}

.header {
  position: relative;
  background-color: white;
  height: 100px;
}

.circle {
  position: absolute;
  bottom: calc(var(--circle-width) / 7 * -1);
  left: 10%;
  width: var(--circle-width);
  height: calc(var(--circle-width) / 2);
  background-color: white;
  border-radius: 50%;
  
  /* Can write Logo Content to center of circle */
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border-radius: 50%;
  z-index: -1; /* Background, behind the .circle. */
}

.header, .circle::before {
  box-shadow: 0px 10px 20px -5px rgba(0,0,0,0.75);
}

/* So the content moves towards the div with the .circle class */
.content {
  position: absolute;
  inset: 0;
  z-index: 1;
}
<div class="header">
  <div class="circle">
    Logo Content Here
  </div>
  <div class="content">
    Header Content Here
  </div>
</div>

Html相关问答推荐

传单自定义标记(divIcon)html/css不适用

使用tauri构建的Next.js应用程序不显示我的404页面

垂直页眉，每行只显示一个使用css的字母

创建一个带有div和径向渐变的全宽半圆

响应网格，响应调整大小以适应父div，保留父div S自己的响应高度

如何在网格中拥有离散的行

禁用的文本区域会丢失换行符

如何更改Django中的默认按钮？

如何使用css横向显示英文和中日韩文字？

使用bash从html表格中提取表格

带有图像的虚线边框

为什么要添加换行符(至少在 Google Chrome 中)

页面文件夹内的 HTML 页面未加载主目录的 style.css

将组件移动到页面底部 Angular

在 iPhone 上分隔 HTML 邮箱输入中的多个邮箱条目

导航丸被选中(活动)，但内容未显示.怎么会？

使用模板循环每行列出 3 个 bootstrap 卡

我正在使用 react-router-dom 并创建了一个固定的导航栏，它在每个网页上不断改变大小，我不知道为什么

svg 内容超过元素

列宽等于最宽列宽度的无界容器

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630