简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
製作可自適應螢幕大小的按鈕-背景圖像的用法詳解
P粉345302753
P粉345302753 2023-08-16 13:38:12
0
1
602
<p>我正在開發一個需要多個圖形並排顯示並且能夠根據設備螢幕大小自適應的pfsense captive portal。使用影像輸入類型可以很好地實現這一點。然而，pfsense設備無法正確識別此提交。它需要一種帶有值為“Continue”的提交類型才能工作。 </p> <p>我嘗試使用背景圖像來替代，但是背景圖像無法縮放。隨著螢幕變小，它會顯示為全尺寸並被裁剪。 </p> <p>我該如何讓背景圖片自適應大小？ </p> <pre class="brush:php;toolbar:false;"><style> #content{font-family:'Source Sans Pro',sans-serif;background-color: gray; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; display:table-cell; vertical-align:middle;} #content{text-align:center} body,html{margin:0; padding:0; width:100%; height:100%; display:table} .row {display: flex;} .column {flex: 50%; padding: 50px;} input { background-size: contain; resize: both; border: 0; width: 100%; max-width: 100%; padding: 0 0 50%; object-fit: scale-down; text-indent: 100%; white-space: nowrap; overflow: hidden; } @media screen and (max-width: 500px) { .column { width: 100%; } } </style> .... <body> <div id="content"> <div class="row"> <div class="column"> <form name="login_form" method="post" action="$PORTAL_ACTION$"> <input name="redirurl" type="hidden" value="https://url"> <input name="accept" type="submit" style="background: url(image1.png) no-repeat;" value="Continue"> <input name="zone" type="hidden" value="$PORTAL_ZONE$"> </form> </div> <div class="column"> <form name="login_form" method="post" action="$PORTAL_ACTION$"> <input name="redirurl" type="hidden" value="https://url"> <input name="accept" type="submit" style="background: url(image2.png) no-repeat;" value="Continue"> <input name="zone" type="hidden" value="$PORTAL_ZONE$"> </form> </div> </div> </body></pre> <p><br /></p>
P粉345302753
P粉345302753

全部回覆(1)
P粉851401475
P粉8514014752023-08-17 00:58:26 1樓

background-size: cover會實現這個效果。 

<input name="accept" type="submit" style="background: url(https://picsum.photos/1500/1500?random=1) no-repeat; background-size: cover;" value="继续">

#content{font-family:'Source Sans Pro',sans-serif;background-color: gray; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; display:table-cell; vertical-align:middle;}
#content{text-align:center} body,html{margin:0; padding:0; width:100%; height:100%; display:table}    
.row {display: flex;}
.column {flex: 50%; padding: 50px;}
input {
    background-size: contain;
    resize: both;
    border: 0;
    width: 100%;
    max-width: 100%;
    padding: 0 0 50%;
    object-fit: scale-down;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
@media screen and (max-width: 500px) {
    .column {
        width: 100%;
    }
}
<div id="content">
<div class="row">
  <div class="column">
    <form name="login_form" method="post" action="$PORTAL_ACTION$">
        <input name="redirurl" type="hidden" value="https://url">
        <input name="accept" type="submit" style="background: url(https://picsum.photos/1500/1500?random=1) no-repeat; background-size: cover;" value="继续">
        <input name="zone" type="hidden" value="$PORTAL_ZONE$">
    </form>
  </div>
  <div class="column">
    <form name="login_form" method="post" action="$PORTAL_ACTION$">
        <input name="redirurl" type="hidden" value="https://url">
        <input name="accept" type="submit" style="background: url(https://picsum.photos/1500/1500?random=2) no-repeat; background-size: cover;" value="继续">
        <input name="zone" type="hidden" value="$PORTAL_ZONE$">
    </form>
  </div>
</div>
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！