mask

dist/css/index.css

@@ -1217,6 +1217,10 @@ article.case section:after {
   height: 444px;
   overflow: hidden;
 }
+.gallery .coverSlide p {
+  font-size: 44px;
+  top: 28%;
+}
 .gallery .search {
   width: 100%;
   height: 130px;

dist/css/largeSlides.css

@@ -646,6 +646,7 @@ h3 {
 .callbacks li {
   position: absolute;
   width: 100%;
+  height: 555px;
   left: 0;
   top: 0;
 }
@@ -653,20 +654,24 @@ h3 {
   display: block;
   position: relative;
   z-index: 1;
-  height: auto;
+  height: 555px;
   width: 100%;
   border: 0;
 }
+.callbacks img.maskBg {
+  position: absolute;
+  top: 0px;
+  z-index: 2;
+}
 .callbacks .caption {
   width: 100%;
   display: block;
   position: absolute;
-  z-index: 2;
+  z-index: 5;
   font-size: 60px;
   text-shadow: none;
   color: #fff;
   top: 35%;
-  bottom: 0;
   padding: 10px 20px;
   margin: 0;
   max-width: none;

dist/html/gallery.html

@@ -48,13 +48,19 @@
         <div class="callbacks_container">
             <ul class="rslides" id="slider">
                 <li>
-                    <img src="../img/indexSlide.png?c=2" alt="">
+                    <img src="../img/whiteBg.png" alt="">
+                    <p class="caption">影像服务与管理专家</p>
+                    <img src="../img/maskBg.png" alt="" class="maskBg"/>
                 </li>
                 <li>
-                    <img src="../img/indexSlide.png?c=2" alt="">
+                    <img src="../img/indexSlide.png" alt="">
+                    <p class="caption">影像服务与管理专家</p>
+                    <img src="../img/maskBg.png" alt="" class="maskBg"/>
                 </li>
                 <li>
-                    <img src="../img/indexSlide.png?c=2" alt="">
+                    <img src="../img/indexSlide.png" alt="">
+                    <p class="caption">影像服务与管理专家</p>
+                    <img src="../img/maskBg.png" alt="" class="maskBg"/>
                 </li>
             </ul>
         </div>

dist/html/index.html

@@ -59,16 +59,19 @@
     <div class="callbacks_container">
         <ul class="rslides" id="slider">
             <li>
-                <img src="../img/indexSlide.png" alt="">
+                <img src="../img/whiteBg.png" alt="">
                 <p class="caption">影像服务与管理专家</p>
+                <img src="../img/maskBg.png" alt="" class="maskBg"/>
             </li>
             <li>
                 <img src="../img/indexSlide.png" alt="">
                 <p class="caption">影像服务与管理专家</p>
+                <img src="../img/maskBg.png" alt="" class="maskBg"/>
             </li>
             <li>
                 <img src="../img/indexSlide.png" alt="">
                 <p class="caption">影像服务与管理专家</p>
+                <img src="../img/maskBg.png" alt="" class="maskBg"/>
             </li>
         </ul>
     </div>

dist/html/login.html

@@ -40,7 +40,7 @@
 
 
       /*背景图满屏*/
-      var H=window.screen.availHeight;
+      var H=window.screen.availHeight+15;
       window.onload = function(){
           $(".login").height(H);
       }

src/less/index.less

@@ -533,6 +533,10 @@ article.case {
   padding: 80px 128px;
   .coverSlide{
     .margin-auto(935px,444px);
+    p{
+      font-size: 44px;
+      top: 28%;
+    }
   }
   .search{
     width: 100%;

src/less/largeSlides.less

@@ -101,6 +101,7 @@ h3 {
 .callbacks li {
   position: absolute;
   width: 100%;
+  height: 555px;
   left: 0;
   top: 0;
   }
@@ -109,21 +110,24 @@ h3 {
   display: block;
   position: relative;
   z-index: 1;
-  height: auto;
+  height: 555px;
   width: 100%;
   border: 0;
   }
-
+.callbacks img.maskBg{
+  position: absolute;
+  top: 0px;
+  z-index: 2;
+}
 .callbacks .caption {
     width: 100%;
   display: block;
   position: absolute;
-  z-index: 2;
+  z-index: 5;
   font-size: 60px;
   text-shadow: none;
   color: #fff;
   top:35%;
-  bottom: 0;
   padding: 10px 20px;
   margin: 0;
   max-width: none;
@@ -182,7 +186,6 @@ li.callbacks_here{
     border: 1px solid #1dd2af;
 }
 
-
 @media screen and (max-width: 600px) {
   h1 {
     font: 24px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;

src/pages/gallery.ejs

@@ -24,13 +24,19 @@
         <div class="callbacks_container">
             <ul class="rslides" id="slider">
                 <li>
-                    <img src="../img/indexSlide.png?c=2" alt="">
+                    <img src="../img/whiteBg.png" alt="">
+                    <p class="caption">影像服务与管理专家</p>
+                    <img src="../img/maskBg.png" alt="" class="maskBg"/>
                 </li>
                 <li>
-                    <img src="../img/indexSlide.png?c=2" alt="">
+                    <img src="../img/indexSlide.png" alt="">
+                    <p class="caption">影像服务与管理专家</p>
+                    <img src="../img/maskBg.png" alt="" class="maskBg"/>
                 </li>
                 <li>
-                    <img src="../img/indexSlide.png?c=2" alt="">
+                    <img src="../img/indexSlide.png" alt="">
+                    <p class="caption">影像服务与管理专家</p>
+                    <img src="../img/maskBg.png" alt="" class="maskBg"/>
                 </li>
             </ul>
         </div>

src/pages/index.ejs

@@ -35,16 +35,19 @@
     <div class="callbacks_container">
         <ul class="rslides" id="slider">
             <li>
-                <img src="../img/indexSlide.png" alt="">
+                <img src="../img/whiteBg.png" alt="">
                 <p class="caption">影像服务与管理专家</p>
+                <img src="../img/maskBg.png" alt="" class="maskBg"/>
             </li>
             <li>
                 <img src="../img/indexSlide.png" alt="">
                 <p class="caption">影像服务与管理专家</p>
+                <img src="../img/maskBg.png" alt="" class="maskBg"/>
             </li>
             <li>
                 <img src="../img/indexSlide.png" alt="">
                 <p class="caption">影像服务与管理专家</p>
+                <img src="../img/maskBg.png" alt="" class="maskBg"/>
             </li>
         </ul>
     </div>

src/pages/login.ejs

@@ -40,7 +40,7 @@
 
 
       /*背景图满屏*/
-      var H=window.screen.availHeight;
+      var H=window.screen.availHeight+15;
       window.onload = function(){
           $(".login").height(H);
       }