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; align-items: center;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
background-repeat: no-repeat; }
background-position: center center; .section.main-banner .media {
background-size: cover; 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(1),
.section.main-banner .banner-text p:nth-child(2) { .section.main-banner .banner-text p:nth-child(2) {

15
css/style.less
View File

@ -283,12 +283,21 @@
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 100vh; 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 { .banner-text {
position: relative;
z-index: 10;
p:nth-child(1), p:nth-child(1),
p:nth-child(2) { p:nth-child(2) {

6
index.html
View File

@ -38,7 +38,8 @@
<div class="section main-banner swiper-container"> <div class="section main-banner swiper-container">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide"> <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"> <div class="banner-text">
<p>您的现金流安全 <span style="color: #FF0000;">左心房</span>来守护</p> <p>您的现金流安全 <span style="color: #FF0000;">左心房</span>来守护</p>
<p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p> <p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p>
@ -46,7 +47,8 @@
</a> </a>
</div> </div>
<div class="swiper-slide"> <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"> <div class="banner-text">
<p>您的现金流安全 <span style="color: #FF0000;">左心房</span>来守护</p> <p>您的现金流安全 <span style="color: #FF0000;">左心房</span>来守护</p>
<p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p> <p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p>