RyanGoodwill/web_assignment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善和调整磨砂玻璃效果

Browse Source
This commit is contained in:
高子兴 2024-07-14 22:49:05 +08:00
parent efc6c8f9c9
commit 6cdec726ca
1 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/main/webapp/resources/css/styles.css
View File

@ -3,7 +3,6 @@ html {
font-family: Arial, sans-serif; /* Sets the default font to Arial, with a sans-serif fallback */ font-family: Arial, sans-serif; /* Sets the default font to Arial, with a sans-serif fallback */
margin: 0; /* Removes default margin */ margin: 0; /* Removes default margin */
padding: 0; /* Removes default padding */ padding: 0; /* Removes default padding */
background-color: #f4f4f4; /* Sets a light grey background color for the body */
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -17,7 +16,7 @@ body {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #f4f4f4 url("/web_assignment_war_exploded/resources/images/background.jpg") no-repeat center center fixed; background: rgba(244, 244, 244, 0) url("/web_assignment_war_exploded/resources/images/background.jpg") no-repeat center center fixed;
background-size: cover; /* Ensures the background image covers the entire area without distortion */ background-size: cover; /* Ensures the background image covers the entire area without distortion */
} }
@ -73,6 +72,7 @@ footer {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
backdrop-filter: blur(5px); /* 磨砂玻璃效果 */
} }
.project-list li, .liButton { .project-list li, .liButton {
@ -212,6 +212,7 @@ footer {
#project-list, #user-list { #project-list, #user-list {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background-color: rgba(249, 249, 249, 0.8); /* 半透明背景 */ background-color: rgba(249, 249, 249, 0.8); /* 半透明背景 */
backdrop-filter: blur(5px); /* 磨砂玻璃效果 */
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
@ -223,6 +224,7 @@ footer {
#user-list { #user-list {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background-color: rgba(249, 249, 249, 0.8); /* 半透明背景 */ background-color: rgba(249, 249, 249, 0.8); /* 半透明背景 */
backdrop-filter: blur(5px); /* 磨砂玻璃效果 */
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
@ -240,6 +242,7 @@ footer {
#project-details, #user-info { #project-details, #user-info {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background-color: rgba(249, 249, 249, 0.8); /* 半透明背景 */ background-color: rgba(249, 249, 249, 0.8); /* 半透明背景 */
backdrop-filter: blur(5px); /* 磨砂玻璃效果 */
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
@ -284,7 +287,7 @@ footer {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 80%; /* 修改为百分比宽度，自适应屏幕 */ max-width: 80%; /* 修改为百分比宽度，自适应屏幕 */
margin: 20px auto; margin: 20px auto;
backdrop-filter: blur(10px); /* 磨砂玻璃效果 */ backdrop-filter: blur(5px); /* 磨砂玻璃效果 */
} }
.project-form h2, #user-info-edit h2 { .project-form h2, #user-info-edit h2 {
@ -349,7 +352,7 @@ footer {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 盒子阴影 */ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 盒子阴影 */
max-width: 80%; /* 设置最大宽度 */ max-width: 80%; /* 设置最大宽度 */
margin: 20px auto; /* 垂直外边距和水平居中 */ margin: 20px auto; /* 垂直外边距和水平居中 */
backdrop-filter: blur(10px); /* 磨砂玻璃效果 */ backdrop-filter: blur(5px); /* 磨砂玻璃效果 */
} }
/* Heading styling for About Me */ /* Heading styling for About Me */