topnuomi
/
zxf
mirror of https://gitee.com/topnuomi/zxf
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

优化banner样式

This commit is contained in:
TOP糯米 2023-10-13 16:51:33 +08:00
parent 4867233e18
commit b7f99e74aa
3 changed files with 29 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
css/style.css
View File

@ -218,9 +218,19 @@
align-items: center;
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.section.main-banner .media {
z-index: 5;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.section.main-banner .banner-text {
position: relative;
z-index: 10;
}
.section.main-banner .banner-text p:nth-child(1),
.section.main-banner .banner-text p:nth-child(2) {

15
css/style.less
View File

@ -283,12 +283,21 @@
align-items: center;
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.media {
z-index: 5;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.banner-text {
position: relative;
z-index: 10;
p:nth-child(1),
p:nth-child(2) {

6
index.html
View File

@ -38,7 +38,8 @@
<div class="section main-banner swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a class="item" style="background-image: url('images/banner.png');" href="">
<a class="item" href="">
<img class="media" src="images/banner.png" alt="">
<div class="banner-text">
<p>您的现金流安全 <span style="color: #FF0000;">左心房</span>来守护</p>
<p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p>
@ -46,7 +47,8 @@
</a>
</div>
<div class="swiper-slide">
<a class="item" style="background-image: url('images/banner.png');" href="">
<a class="item" href="">
<img class="media" src="images/banner.png" alt="">
<div class="banner-text">
<p>您的现金流安全 <span style="color: #FF0000;">左心房</span>来守护</p>
<p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p>