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:  |
<<: Use of align-content in flex layout line break space
>>: Steps for IDEA to integrate Docker to achieve remote deployment
Recommend
Detailed explanation of the practice of installing the Permeate range system using VMware
1. Background We do some internal training from t...
A brief discussion on spaces and blank lines in HTML code
All consecutive spaces or blank lines (newlines) ...
Front-end AI cutting tips (experience)
AI image cutting needs to be coordinated with PS....
MySQL database architecture details
Table of contents 1. MySQL Architecture 2. Networ...
Tomcat uses Log4j to output catalina.out log
Tomcat's default log uses java.util.logging, ...
The latest mysql-5.7.21 installation and configuration method
1. Unzip the downloaded MySQL compressed package ...
HTML Learning Notes--Detailed Explanation of HTML Syntax (Must Read)
1. What is HTML markup language? HTML is a markup...
Ubuntu starts the SSH service remote login operation
ssh-secure shell, provides secure remote login. W...
Install Jenkins with Docker and solve the problem of initial plugin installation failure
After installing Jenkins, the initial download of...
Detailed explanation of triangle drawing and clever application examples in CSS
lead Some common triangles on web pages can be dr...
Vue3+TypeScript encapsulates axios and implements request calls
No way, no way, it turns out that there are peopl...
Vue project implements file download progress bar function
There are two common ways to download files in da...
Detailed explanation of the use of Vue h function
Table of contents 1. Understanding 2. Use 1. h() ...
MySQL database Load Data multiple uses
Table of contents Multiple uses of MySQL Load Dat...
Detailed explanation of the getBoundingClientRect() method in js
1. getBoundingClientRect() Analysis The getBoundi...