花式盒 - 移动图像缩放

Question

<style>  
  @font-face {
      font-family: 'dalafloda';
      src: url('DalaFloda-Roman.eot');
      src: url('DalaFloda-Roman.eot?#iefix') format('embedded-opentype'),
           url('DalaFloda-Roman.woff2') format('woff2'),
           url('DalaFloda-Roman.woff') format('woff'),
           url('DalaFloda-Roman.ttf') format('truetype'),
           url('DalaFloda-Roman.svg#dalafloda') format('svg');
      font-weight: normal;
      font-style: normal;

  }
  @font-face {
      font-family: 'verlag';
      src: url('Verlag-Book.eot');
      src: url('Verlag-Book.eot?#iefix') format('embedded-opentype'),
           url('Verlag-Book.woff2') format('woff2'),
           url('Verlag-Book.woff') format('woff'),
           url('Verlag-Book.ttf') format('truetype'),
           url('Verlag-Book.svg#verlag') format('svg');
      font-weight: normal;
      font-style: normal;

  }
  .fancybox-skin {
    background:#000;
    border:4px solid #000000;
    padding: 0 !important;
  }
  #target {padding:0px !important;}
  
  
  #target input[type="text"], 
  #target input[type="number"], 
  #target input[type="password"], 
  #target input[type="email"], 
  #target textarea, #target select {
      
    border:1px solid #dee7de;
  }
  #target .sign_up {   
    /*background:url(https://cdn.shopify.com/s/files/1/0435/8625/t/5/assets/get-img.jpg?1906) no-repeat right top !important;*/
    border: 0 none !important;
    border-radius: 0 !important;
    color: #000 !important;
    float: right;
    font-size: 0 !important;
    height: 24px;
    text-align: left;
    
  }
  #target input[type="text"]:focus, #target textarea:focus {
    border: 1px solid #868d95 !important;
    border-radius: 0 3px 3px 0 !important;
    outline:0;
}
.fancybox-wrap  #target input[type="submit"]{margin-top:0!important;}
.fancybox-wrap input.mailing-list-email{margin:0}
  .fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp {
    padding:0;
    margin:0;
    border:0;
    outline:none;
    vertical-align:top
}
.fancybox-wrap {
    position:absolute;
    top:0;
    left:0;
    z-index:8020
}
.fancybox-skin {
    position:relative;
    background-color:#ffffff;
    color:#444;
    text-shadow:none;
  padding:0px!important;
}
.fancybox-opened {
    z-index:8030
}
.fancybox-opened .fancybox-skin {
    -webkit-box-shadow:0 10px 25px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:0 10px 25px rgba(0, 0, 0, 0.5);
    box-shadow:0 10px 25px rgba(0, 0, 0, 0.5)
}
.fancybox-outer, .fancybox-inner {
    position:relative;
    text-align:center;
    width: 100% !important;
}
.fancybox-inner {
  min-height: 385px;
  overflow: hidden !important;      
}
.fancybox-type-iframe .fancybox-inner {
    -webkit-overflow-scrolling:touch
}
.fancybox-error {
    color:#444;
    font:14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin:0;
    padding:15px;
    white-space:nowrap
}
.fancybox-image, .fancybox-iframe {
    display:block;
    width:100%;
    height:100%
}
.fancybox-image {
    max-width:100%;
    max-height:100%
}
#fancybox-loading {
    position:fixed;
    top:50%;
    left:50%;
    margin-top:-22px;
    margin-left:-22px;
    background-position:0 -306px;
    opacity:1;
    cursor:pointer;
    z-index:8060;
    -webkit-border-radius:4px;
    -khtml-border-radius:4px;
    -moz-border-radius:4px;
    -ms-border-radius:4px;
    -o-border-radius:4px;
    border-radius:4px;
    background-color:#fff
}
#fancybox-loading div {
    width:44px;
    height:44px;
  background:url({{'loader.gif'| asset_url}}) center center no-repeat;
    background-size:32px 32px;
    display:block !important
}
.fancybox-close {
    position:absolute;
    top:5px;
    right:8px;
    cursor:pointer;
    z-index:8040;
    font-size:24px !important;
    color:#404040 !important
}
.fancybox-nav {
    position:absolute;
    top:50%;
    
    cursor:pointer;
    text-decoration:none;
    background:transparent url("//cdn.shopify.com/s/files/1/1136/5902/t/2/assets/blank.gif?3426909821341757287");
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    z-index:8040
}
.fancybox-prev {
    left:-15px;
}
  .fancybox-nav.fancybox-prev::after,.fancybox-nav.fancybox-next::after {
    content: "";
    width:30px; height:34px;
    background:#868d95;
    display:inline-block;
    background:url({{'plyroom-prev.png'| asset_url}});
    opacity:0.5;
}
.fancybox-next {
    right:-15px;
}
  .fancybox-nav.fancybox-next::after {
    background:url({{'plyroom-next.png'| asset_url}})
}
  .fancybox-nav.fancybox-prev:hover::after,.fancybox-nav.fancybox-next:hover::after {opacity:1}
/*.fancybox-nav span {
    position:absolute;
    top:45%;
    width:60px;
    height:60px;
    margin-top:-18px;
    cursor:pointer;
    z-index:8040;
    visibility:hidden;
    color:#333;
    opacity:0.8;
    text-shadow:0 0 1px #fff
}*/
.fancybox-prev span {
    left:10px
}
.fancybox-next span {
    right:10px
}
.fancybox-nav:hover span {
    visibility:visible
}
.fancybox-tmp {
    position:absolute;
    top:-9999px;
    left:-9999px;
    visibility:hidden
}
.fancybox-lock {
    overflow:hidden
}
.fancybox-overlay {
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
    display:none;
    z-index:8010;
  background:url({{'fancybox_overlay.png' | asset_url}})
}
.fancybox-overlay-fixed {
    position:fixed;
    bottom:0;
    right:0
}
.fancybox-lock .fancybox-overlay {
    overflow:auto;
    overflow-y:scroll
}
.fancybox-title {
    visibility:hidden;
    position:relative;
    text-shadow:none;
    z-index:8050;
    width:100%
}
.fancybox-opened .fancybox-title {
    visibility:visible
}
 .fancybox-close::after {
    background: #ffffff none repeat scroll 0 0;
    color: #98999a;
    content: "X";
    display: inline-block;
    font-size: 14px;
    height: 24px;
    position: absolute;
    right: -8px;
    text-align: center;
    top: -5px;
    width: 24px;
}
.fancybox-title-float-wrap {
    position:absolute;
    bottom:0;
    right:50%;
    margin-bottom:-28px;
    z-index:8050;
    text-align:center
}
.fancybox-title-float-wrap .child {
    display:inline-block;
    margin-right:-100%;
    padding:2px 0px;
    background:transparent;
    background:rgba(0, 0, 0, 0.6);
    text-shadow:0 1px 2px #222;
    color:#FFF;
    font-weight:bold;
    line-height:24px;
    white-space:nowrap;
    width:100%;
    -webkit-border-bottom-right-radius:4px;
    -webkit-border-bottom-left-radius:4px;
    -moz-border-radius-bottomright:4px;
    -moz-border-radius-bottomleft:4px;
    border-bottom-right-radius:4px;
    border-bottom-left-radius:4px
}
.fancybox-title-outside-wrap {
    position:relative;
    margin-top:10px;
    color:#fff
}
.fancybox-title-inside-wrap {
    padding-top:10px
}
.fancybox-title-over-wrap {
    position:absolute;
    bottom:0;
    left:0;
    color:#fff;
    padding:10px;
    background:#000;
    background:rgba(0, 0, 0, 0.8)
}

.newsletter {
    margin-bottom:1.5em
}
.newsletter_popup .fancybox-skin, .newsletter_popup .fancybox-skin h1 {
    color:#404040 !important
}
.newsletter_popup {
    background-color:rgba(0, 0, 0, 0)
}
.newsletter_popup .fancybox-close {
    color:#ffffff !important
}
.newsletter_popup {
    background:rgba(0, 0, 0, 0) url("//cdn.shopify.com/s/files/1/1136/5902/t/2/assets/newsletter_bg.png?3426909821341757287") center center
}
.newsletter_popup .fancybox-skin {
    color:#404040 !important;
    background-color:transparent
}
  .fancybox-wrap{
    min-width: 630px;
  }
  .fancybox-wrap h4{display:none;}
  .fancybox-wrap p{margin:0 0 8px; font-size:14px;}
  .fancybox-wrap .mailing-list{width:100%}
  .fancybox-wrap .contact-form{margin:0 auto; padding:0;}
  .fancybox-inner{
    min-height: 385px;  
  }
  .fancybox-inner #target h2{
    font-family: Dala Floda Web,sans-serif;
    color: #58595b;
    position: relative;
    margin: 0;
    padding-top: 95px;
    font-size: 24px;
  } 
  .fancybox-inner #target h2 span{
    font-family: Dala Floda Web,sans-serif;
    color: #58595b;
    position: relative;
    font-size: 24px;
    border-bottom: 2px solid #58595b;
  }
  .fancybox-inner .newsletter-subheading{
    position: relative;
    text-transform: uppercase;
    width: 60%;
    margin: auto;
    padding-top: 200px;
    color: #58595b;
    letter-spacing: 2px;
  }
  .fancybox-wrap  .mailing-list-submit{
    right: 3%;
  }   
  @media (max-width: 1200px) {
    .fancybox-wrap  .mailing-list-submit{
      right: 4%;
    }  
  }
  @media (max-width: 900px) {
    .fancybox-wrap  .mailing-list-submit{
      right: 7%;
    }   
  }
  @media (max-width: 400px) {
    .fancybox-wrap{
      min-width: 90%;
      padding: 20px;
    }
    .newsletter-bg img{
      height: 100%;
    }  
    .fancybox-wrap .contact-form{
      max-width: 80%;
    }
  }  

  .fancybox-wrap  .mailing-list-submit input{
    background: url('{{ 'arrow.png' | asset_url }}');
    background-repeat: no-repeat;
    background-position: center;       
  } 
  .newsletter-bg{
    position: absolute;
  }
 </style>


{% if settings.newsletter_popup %}   
    <a id="newsletter" href="#target"></a>
    <div style="display: none;">
     <div id="target">
       {% if settings.use_newsletter_bg %}<div class='newsletter-bg'><img src='{{ 'newsletter_popup_bg.png' | asset_url }}'></div>{% endif %}
       <h2><span>{{settings.newsletter_text}}</span></h2><p class='newsletter-subheading'>{{settings.newsletter_description}}</p>
    {% if settings.newsletter_popup_form %}
<div class="mailing-list newsletter">

          {% if settings.footer-headers %}
            <h4 class="section-title">{{ settings.mailing-list-title }}</h4>
          {% endif %}

          {% if settings.mailing-list-platform == 'mailchimp' or settings.mailing-list-platform == 'campaign-monitor' %}
            <form action="{{ settings.mailing-list-action-url }}" method="post" name="{% if settings.mailing-list-platform == 'mailchimp' %}mc-embedded-subscribe-form{% endif %}" id="mc-embedded-subscribe-form" class="validate contact-form" target="_blank" novalidate>

              {% if settings.mailing-list-platform == 'mailchimp' %}
                <input id="mce-EMAIL" class="mailing-list-email" name="EMAIL" type="email" placeholder="your@email.com" value="">
              {% endif %}

              {% if settings.mailing-list-platform == 'campaign-monitor' %}
                <input id="fieldEmail" class="mailing-list-email" name="{{ settings.campaign-monitor-name }}" type="email" placeholder="{{ 'general.general.email_placeholder' | t }}" required />
              {% endif %}
              <div id="mce-responses" class="clear">
                <div class="response" id="mce-error-response" style="display:none"></div>
                <div class="response" id="mce-success-response" style="display:none"></div>
              </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;display:none;" aria-hidden="true"><input type="text" name="b_4c740f62a8e9d9506999fa2c7_00327ea4db" tabindex="-1" value=""></div>

              <div class="mailing-list-submit">
                <input class="submit" name="subscribe" type="submit" id="mc-embedded-subscribe" value="">
              </div>

            </form>
  <!--<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';}(jQuery));var $mcj = jQuery.noConflict(true);</script>-->
          {% else %}

            {% form 'customer' %}
              <input class="mailing-list-email" name="contact[email]" type="email" placeholder="your@email.com" value="">
              <input type="hidden" id="contact_tags" name="contact[tags]" value="prospect,newsletter"/>
              <div class="mailing-list-submit">
                <input class="submit" name="subscribe" type="submit" value="{{ 'layout.footer.newsletter_subscribe' | t }}">
              </div>
            {% endform %}

            <div class="modal-wrapper modal-mailing-list">
              <div class="modal">
                <h3 class="section-title">{{ settings.mailing-list-modal-title }}</h3>
                <p>{{ settings.mailing-list-modal-description }}</p>
                <span class='button dismiss'>{{ settings.mailing-list-modal-button-text }}</span>
              </div>
            </div>

          {% endif %}

        </div>
    {% endif %}
      </div>
    </div>    

  <script type="text/javascript">
    function openNewsletterPopup() {
      {% if settings.newsletter_popup_page != blank %}
        $.get("/pages/{{ settings.newsletter_popup_page }}.json", function(data) {
              $("#target").prepend("<h2>{{settings.newsletter_text}}</h2><p class='newsletter-subheading'>{{settings.newsletter_description}}</p>" + data["page"]["body_html"]);
        });
      {% endif %}    
      setTimeout( function() {
        $('#newsletter').fancybox({maxWidth: {% if settings.newsletter_popup_max_width != blank %}{{ settings.newsletter_popup_max_width }}{% else %}600{% endif %}});
        $('#newsletter').trigger('click'); 
      }, 
      {% if settings.newsletter_popup_seconds != blank %}{{ settings.newsletter_popup_seconds }}{% else %}2{% endif %}*1000);
    }

    $(function() {
      var popup = $.cookie('popup');
      var cookie_enabled = {% if settings.newsletter_popup_days != blank and settings.newsletter_popup_days != "0" %}true{% else %}false{% endif %};
      if (cookie_enabled && popup == 'open') {
          return false;
      } else {
        openNewsletterPopup();
      }
      
      if (cookie_enabled) {
        $.cookie('popup', 'open', { expires: {{ settings.newsletter_popup_days }} });
      }
    });
  </script>
{% endif %}

我正在从事弹出通讯的工作使用Fancybox。

设置是移动响应的，但是当它为移动设备缩放时，背景图像会失真。我是一名设计师 - 不是编码员 - 但足以在html或css表格上对Shopify后端进行小改动。

有人知道我应该在Fancybox脚本中查看哪些内容/我应该包含/不包含哪些内容来修复此问题？

附有图片。

非常感谢， Svee

Pop up on desktop

Pop up scaled for mobile

Answer 1

很难在没有看到实际页面的情况下确切地说出来，但是，通过查看您的代码，您似乎应该使用CSS将背景图像设置为newsletter-bg元素（例如background-image: url()和{{1而不只是插入img标记。