php - 我怎样才能阻止这个图像移动？

Question

我正在使用 Joomla 更新我的工作网站 - 我得到了旧副本，我需要改进它。 (网站是 24x7cloud.co.uk )在底部我想创建一个“认证”部分，但是，每次我添加这个部分它都会影响我下面的“联系我们”部分。 (附上截图展示)

灰色叠加层应覆盖整个图像，并且图像不应向下拉伸(stretch)太远。它应该切断灰色穿过电话亭的地方。当上面的部分不存在时就像这样，但是一旦我创建它 - 它会推送图像并创建这种效果......

The Orange scribble is the part that is broken. That part of the scribble shouldn't be there. It should cut off where the grey banner stops

What the website should look like

What it looks like when adding a new section above

这是“联系我们”的 HTML

/* ==== 18) Contact Details ==== */

#contact {
  background-position: center 0%;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../img/bg_8.jpg);
  display: table;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  z-index: 1;
  color: #121212;
}

.details {
  margin-top: 20px;
  margin-bottom: 20px;
  color: #fff;
  z-index: 3;
}

.phone-info {
  line-height: 0;
  border-radius: 3px;
  display: inline-block;
  color: #fff;
  padding-bottom: 5px;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 0px;
}

.blah a {
  color: #ffffff;
  font-weight: 300;
  font-family: "Raleway", sans-serif;
}


/* Overlay on contact us */


}
.parallax-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/pattern.png);
  background-repeat: repeat;
  background-color: rgba(44, 62, 80, 0.6);
  z-index: 2;
}

<div class="details col-lg-6 col-md-6 col-sm-6 col-xs-12" style="margin-top:60px;">
</div>

<div class="details col-lg-6 col-md-6 col-sm-6 col-xs-12" style="margin-top:60px;">

  <h2>Contact us</h2>
  <p class="lead">We would love to work with you!</p>

  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
    <h3><small class="white"><a href="callto:+443302231042" style="color:#FFFFFF;"><i class="icon ion-ios7-telephone ion-1x white"></i> 0330 223 1042</a></small></h3>
  </div>

  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center blah">
    <h4>
      <script type="text/javascript">
        //<![CDATA[
        <!--
        var x = "function f(x){var i,o=\"\",ol=x.length,l=ol;while(x.charCodeAt(l/13)!" +
          "=92){try{x+=x;l+=l;}catch(e){}}for(i=l-1;i>=0;i--){o+=x.charAt(i);}return o" +
          ".substr(0,ol);}f(\")621,\\\"6<0#+6f)9ov,ncP220\\\\020\\\\720\\\\730\\\\230\\" +
          "\\430\\\\220\\\\400\\\\5000\\\\020\\\\320\\\\500\\\\630\\\\000\\\\r\\\\SN71" +
          "30\\\\<H310\\\\710\\\\400\\\\)Cr\\\\5@4=40030\\\\x500\\\\e2:!='rs410\\\\;-," +
          "8%%n\\\\h\\\"\\\\2,7!'620\\\\}K]XVYOJ700\\\\\\\\\\\\C330\\\\[P430\\\\^\\\\\\" +
          "\\CKNHNXi\\\\\\\\DGQJLA330\\\\Okrt}v8E%qsg|3s-2'`ai771\\\\c{771\\\\)rkanwbo" +
          "230\\\\\\\"(f};o nruter};))++y(^)i(tAedoCrahc.x(edoCrahCmorf.gnirtS=+o;721=" +
          "%y{)++i;l<i;0=i(rof;htgnel.x=l,\\\"\\\"=o,i rav{)y,x(f noitcnuf\")";
        while (x = eval(x));
        //-->
        //]]>
      </script>
    </h4>
  </div>

  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
    <h4><small class="white"><a target="_self" href="http://www.redcello.co.uk/index.php?option=com_rsform&view=rsform&formId=6" style="color:#FFFFFF;">Click here for a call back</a></small></h4>
  </div>

  <div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 col-xs-8 col-xs-offset-2" style="padding-top:20px;">

    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
      <div class="about-icon" style="display:block; width:100%;">
        <a target="_blank" href="https://twitter.com/RedcelloUK">
          <i class="icon ion-social-twitter ion-3x white"></i>
        </a>
      </div>
    </div>

    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
      <div class="about-icon" style="display:block; width:100%;">
        <a target="_blank" href="https://www.linkedin.com/company/redcello">
          <i class="icon ion-social-linkedin ion-3x white"></i>
        </a>
      </div>
    </div>

    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
      <div class="about-icon" style="display:block; width:100%;">
        <a target="_blank" href="https://www.facebook.com/RedcelloUK">
          <i class="icon ion-social-facebook ion-3x white"></i>
        </a>
      </div>
    </div>

  </div>

</div>

不确定这是否有帮助，但这是来自 firefox 的元素:

    <section id="contact" data-stellar-background-ratio="1.0" data-stellar-vertical-offset="" style="background-position: 50% 0px;" class="current">
                      <div class="row text-center" style="position:relative;">
                         <div class="parallax-overlay"></div> 
                            <div class="container content">
                        <div class="moduletable">


<div class="custom">
    <div class="details col-lg-6 col-md-6 col-sm-6 col-xs-12" style="margin-top:60px;">
</div>

<div class="details col-lg-6 col-md-6 col-sm-6 col-xs-12" style="margin-top:60px;">

  <h2>Contact us</h2>
   <p class="lead">We would love to work with you!</p>

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<h3><small class="white"><a href="callto:+443302231042" style="color:#FFFFFF;"><i class="icon ion-ios7-telephone ion-1x white"></i> 0330 223 1042</a></small></h3>
</div>

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center blah">
    <h4> 
    <script type="text/javascript">
//<![CDATA[
<!--
var x="function f(x){var i,o=\"\",ol=x.length,l=ol;while(x.charCodeAt(l/13)!" +
"=92){try{x+=x;l+=l;}catch(e){}}for(i=l-1;i>=0;i--){o+=x.charAt(i);}return o" +
".substr(0,ol);}f(\")621,\\\"6<0#+6f)9ov,ncP220\\\\020\\\\720\\\\730\\\\230\\"+
"\\430\\\\220\\\\400\\\\5000\\\\020\\\\320\\\\500\\\\630\\\\000\\\\r\\\\SN71" +
"30\\\\<H310\\\\710\\\\400\\\\)Cr\\\\5@4=40030\\\\x500\\\\e2:!='rs410\\\\;-," +
"8%%n\\\\h\\\"\\\\2,7!'620\\\\}K]XVYOJ700\\\\\\\\\\\\C330\\\\[P430\\\\^\\\\\\"+
"\\CKNHNXi\\\\\\\\DGQJLA330\\\\Okrt}v8E%qsg|3s-2'`ai771\\\\c{771\\\\)rkanwbo" +
"230\\\\\\\"(f};o nruter};))++y(^)i(tAedoCrahc.x(edoCrahCmorf.gnirtS=+o;721=" +
"%y{)++i;l<i;0=i(rof;htgnel.x=l,\\\"\\\"=o,i rav{)y,x(f noitcnuf\")"          ;
while(x=eval(x));
//-->
//]]>
    </script><a href="mailto:contact@redcello.co.uk?subject=Website Contact" title="Click To Mail Us">contact@redcello.co.uk</a>

    </h4> 
    </div>

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<h4><small class="white"><a target="_self" href="http://www.redcello.co.uk/index.php?option=com_rsform&amp;view=rsform&amp;formId=6" style="color:#FFFFFF;">Click here for a call back</a></small></h4>
</div>

<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 col-xs-8 col-xs-offset-2" style="padding-top:20px;">

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
   <div class="about-icon" style="display:block; width:100%;">
        <a target="_blank" href="https://twitter.com/RedcelloUK">
        <i class="icon ion-social-twitter ion-3x white"></i>
        </a>
     </div>
</div>

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
   <div class="about-icon" style="display:block; width:100%;">
        <a target="_blank" href="https://www.linkedin.com/company/redcello">
    <i class="icon ion-social-linkedin ion-3x white"></i>
        </a>
     </div>
</div>

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
   <div class="about-icon" style="display:block; width:100%;">
        <a target="_blank" href="https://www.facebook.com/RedcelloUK">
    <i class="icon ion-social-facebook ion-3x white"></i>
        </a>
     </div>
</div>

</div>

</div></div>
        </div>

                            </div>
                        </div>
                   </section>

对于一堆代码感到抱歉 - 我想确保我得到了帮助所需的一切。多次尝试后 - 我无法终生解决这个问题。任何帮助深表感谢。

Answer 1

将 #contact z-index:1 更改为 z-index:-1;

#contact {
  background-position: center 0%;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../img/bg_8.jpg);
  display: table;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  z-index: -1;
  color: #121212;
}

这将得到文本后面的图像(后面一层)。

引用资料 https://www.w3schools.com/cssref/pr_pos_z-index.asp