开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何从顶部创建除70px以外的整个页面覆盖？

要从顶部创建除70px以外的整个页面覆盖，可以使用CSS来实现。以下是一种常见的方法：

首先，在HTML文件中，确保页面的根元素（通常是<html>元素）和页面的主体元素（通常是<body>元素）都设置了margin和padding属性为0，以去除默认的边距和内边距。

<!DOCTYPE html>
<html>
<head>
  <style>
    html, body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

接下来，使用CSS的绝对定位（position: absolute）和盒模型的宽度和高度属性来创建覆盖整个页面的元素。设置该元素的top、left、right和bottom属性为0，以使其与页面的四个边缘对齐。

<!DOCTYPE html>
<html>
<head>
  <style>
    html, body {
      margin: 0;
      padding: 0;
    }
    
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5); /* 设置覆盖层的背景颜色，这里使用半透明黑色 */
    }
  </style>
</head>
<body>
  <div class="overlay"></div>
  <!-- 页面内容 -->
</body>
</html>

最后，将覆盖层的高度减去70px，以使其除了顶部的70px外，覆盖整个页面。

<!DOCTYPE html>
<html>
<head>
  <style>
    html, body {
      margin: 0;
      padding: 0;
    }
    
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      height: calc(100% - 70px); /* 减去顶部的70px */
      background-color: rgba(0, 0, 0, 0.5); /* 设置覆盖层的背景颜色，这里使用半透明黑色 */
    }
  </style>
</head>
<body>
  <div class="overlay"></div>
  <!-- 页面内容 -->
</body>
</html>

这样，你就可以创建一个除了顶部70px以外的整个页面覆盖的效果。你可以根据需要调整覆盖层的样式和属性，以满足具体的设计要求。

请注意，以上只是一种实现方式，具体的实现方法可能因项目需求和设计风格而有所不同。

相关搜索:CSP框架-祖先-如何阻止除一个页面以外的整个域？如何从特定的pdf页面而不是整个文档访问文本？如何使用scrapy (正确的css选择器)从整个页面获取href？如何制作覆盖整个屏幕顶部的div？如何插入将填充整个div的图像？如何将动态生成的HTML页面一直向下滚动，然后从顶部重新开始滚动？如何将手机摄像头流到html页面，并在顶部覆盖图像并获得exif数据的能力？android网络通讯 android资源文件 AngularJS示例 Android地区选择

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

前端入门学习--CSS

样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

02

前端-CSS-更改标签样式-长宽字体-背景-边框-显示方式-定位-透明度-扩展点-02

目录控制标签元素样式长宽属性、字体属性、文本对齐、文本装饰、首行缩进背景属性、边框属性、圆角 display 显示方式盒子模型 margin、padding... float浮动 overflow 清除溢出（超出div大小的部分） position 定位对文档流的影响 z-index 层级 opacity 标签整体透明度去掉li 前面的标识文本垂直居中单行文本居中作业案例关于自适应（不需要了解）控制标签元素样式小心得：样式有继承(遗传)效果（子元素将继承父元素的样式，如果子元素

02

前端之CSS内容

一、CSS介绍 CSS（Cascading Style Sheet，层叠样式表）定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。二、CSS语法 1

浅议内滚动布局 - 腾讯ISUX

一、什么是内滚动布局？所谓“内滚动布局”，顾名思义就是主滚动条在页面内部的布局，是相对于传统的<html>滚动而言的，例如，下图所示滚动条，是从头部下方开始：传统的页面滚动，基本上是相对于整个浏览

03

浅议内滚动布局

一、什么是内滚动布局？所谓“内滚动布局”，顾名思义就是主滚动条在页面内部的布局，是相对于传统的<html>滚动而言的，例如，下图所示滚动条，是从头部下方开始：传统的页面滚动，基本上是相对于整个浏览器窗体，例如，QQ视频首页：二、为什么会有内滚动布局？随着显示器设备越大越宽越密，以及现代web技术的发展。web站点已经开始有了从传统的瀑布式网页向类桌面软件风格站点转变的趋势。比方说，QQ音乐的首页目前是这样子的：以后可能就会变成这样子： “纳尼，这不就是现在的QQ音乐软件界面截图？”

05

前端学习笔记之CSS属性设置 CSS属性设置

一字体属性 1、font-weight：文字粗细取值描述 normal 默认值，标准粗细 bord 粗体 border 更粗 lighter 更细 100~900 设置具体粗细，400等同于normal，而700等同于bold inherit 继承父元素字体的粗细值 2、font-style：文字风格 normal 正常，默认就是正常的 italic 倾斜 3、font-size：文字大小 fs：一般是12px或13px或14px 注意： 1、通过font-size设置文字大小一定要带单位

03

前端学习笔记之CSS知识汇总 CSS介绍

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

03

Day4:html和css

行高可以让一行文本在盒子中垂直居中对齐,文字的行高等于盒子的高度,行高-上距离-内容高度-下距离.

02

CSS基础

CSS 语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 1 2 3 4 5 6 7 8 9 ''' selector { property: value; property: value; ... property: value } ''' 例如： 1 h1 {color:red; font-size:14px

07

浅议内滚动布局

所谓“内滚动布局”，顾名思义就是主滚动条在页面内部的布局，是相对于传统的<html>滚动而言的，例如，下图所示滚动条，是从头部下方开始：

02

前端基础之CSS_2

标签与标签之间的margin是相对的，它的上下左右有时候只能有2处可以确定，另外2边由于没有参照不会有间隔，所以使用时候一般不会全部上下左右都写上。要表示那一边就写上那一边。

01

18.CSS

选择器 1.标签上直接设置style属性

直接标签里面写

2.id选择器 <style> #i1{ color: green; } </style> </head> <body>

以#开头命名

</body> 3.class选择器 <style> .c1{ color: green; }

07

【前端】：margin

目录 1. margin 特性总结 2. 几道笔试题 1. margin 特性总结 1.1. 横向格式化横向格式化属性有 7 个，分别为 margin-left、border-left、padding-left、width、padding-right、border-right、margin-right。这 7 个属性的值加在一起要等于元素容纳块的宽度。这 7 个属性中，只有 margin-left、width、margin-right 能设置为 auto。 [3个auto] 如果 margin-le

01

浮动清楚浮动及position的用法

static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

04

CSS深入理解学习笔记之absolute

1、absolute和float 　　拥有相同的特性表现：　　　　①包裹性（容器应用之后，可以包裹里面的内容）； 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width"> 6 <title>absolute的包裹性</title> 7 <style> 8 .box { 9 padding: 10px; 10

04

css 定位

正常文档流模式下，后面的dom元素覆盖前面的，如果将前面的元素设置了relative将提升它自身的层级

01

CSS3实现“图片阴影”效果

利用多投影重叠的原理，实现曲线阴影与翘边阴影的效果，花一个小时看完的课程，理解的似懂非懂。直接发一下老师写的成品吧。用到来取。css都补上了注释。

01

css基础

行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。

02

电商项目（上）

:nth-last-child(n): 选择器匹配属于其元素的第n个子元素的每个元素

03

前端学习笔记之CSS网页布局 CSS网页布局

1、浮动流只有一种排版方式，就是水平排版，它只能设置某个元素左对齐或者右对齐，没有居中对齐，也就是没有center这个取值

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭