The top fixed div can be set to a semi-transparent effect

Copy code

The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Top Fixed</title>
<style type="text/css">
html,body {overflow:hidden;margin:0px;width:100%;height:100%;}
.virtual_body {width:100%;height:100%;overflow-y:scroll;overflow-x:auto;}
.fixed_div {position:absolute;z-index:2008;top:0px;left:0px;right:16px;height:40px;background:#CCCCCC;border-bottom:3px inset;border-color:#006699;
//bottom:20px;
//border:1px solid red;
//border-style:inset;
//Translucent effect production
//filter:alpha(opacity=50);
//-moz-opacity:0.5;
//opacity:0.5;
//background:#666666;
}
</style>
</head>
<body>
<div class="fixed_div"><font color="red">Zhengzhou University</font></div>
<div class="virtual_body">
<div style="height:888px;">
<p>

Goodbye, I will definitely come back to see you!
</div>
</div>
</body>
</html>

The effect diagram is as follows:

CSS achieves the effect of hiding the scroll bar and scrolling the content (three ways)

Blog

The top fixed div can be set to a semi-transparent effect

Several CSS3 tag shorthands (recommended)

How to install openjdk in docker and run the jar package

Analysis and description of network configuration files under Ubuntu system

Docker Tutorial: Using Containers (Simple Example)

Linux nohup to run programs in the background and view them (nohup and &)

CSS achieves the effect of hiding the scroll bar and scrolling the content (three ways)

Write a simple calculator using JavaScript

Summary of Binlog usage of MySQL database (must read)

HTML CSS3 does not stretch the image display effect

Basic understanding and use of HTML select option

Recommend

HTML embedded in WMP compatible with Chrome and IE detailed introduction

Vue custom components use event modifiers to step on the pit record

MySQL master-slave synchronization, implementation principle of transaction rollback

Solution to the problem of not finding Tomcat configuration in Intelli Idea

vue+echarts realizes the flow effect of China map (detailed steps)

Mysql cannot select non-aggregate columns

Design of image preview in content webpage

Docker installation and configuration image acceleration implementation

Share 6 invitation codes for unlimited activation of Alibaba Cloud Disk. If you don't believe me, you can activate Alibaba Cloud Disk.

Detailed tutorial on installing Tomcat server and configuring environment variables on Win10 (picture and text)

Complete steps for Nginx to configure anti-hotlinking

Ubuntu 16.04 64-bit compatible with 32-bit programs in three steps

Quick solution for forgetting MySQL8 password

How to write the parent and child directories of HTML relative paths

Analyzing ab performance test results under Apache