如何阻止此图像移动？

时间：2018-02-05 15:57:04

标签： php html css web

我使用Joomla更新了我的工作网站 - 我已经获得了旧版本，我需要对其进行改进。 （网站是24x7cloud.co.uk）我想创建一个＆＃34;认证＆＃34;＆＃34;但是，每次添加此部分时，它都会影响我的＆＃34;联系我们＆＃34;在它下面的部分。 （附上截图显示）

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

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

这是＆＃34;与我们联系＆＃34;

的HTML

＆＃13;
＆＃13; 
/* ==== 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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

不确定这是否有用，但这是来自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>

很抱歉这堆代码 - 我想确保我得到了所需的一切来帮助你。经过多次尝试 - 我不能为我的生活解决这个问题。任何帮助深表感谢。

1 个答案:

答案 0 :(得分：0)

将#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

相关问题
最新问题