制作可自适应屏幕大小的按钮-背景图像的用法详解
P粉345302753
P粉345302753 2023-08-16 13:38:12
[HTML讨论组]
<p>我正在开发一个需要多个图形并排显示并且能够根据设备屏幕大小自适应的pfsense captive portal。使用图像输入类型可以很好地实现这一点。然而,pfsense设备无法正确识别此提交。它需要一种带有值为“Continue”的提交类型才能工作。</p> <p>我尝试使用背景图像来替代,但是背景图像无法缩放。随着屏幕变小,它会显示为全尺寸并被裁剪。</p> <p>我该如何使背景图像自适应大小?</p> <pre class="brush:php;toolbar:false;">&lt;style&gt; #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%; } } &lt;/style&gt; .... &lt;body&gt; &lt;div id="content"&gt; &lt;div class="row"&gt; &lt;div class="column"&gt; &lt;form name="login_form" method="post" action="$PORTAL_ACTION$"&gt; &lt;input name="redirurl" type="hidden" value="https://url"&gt; &lt;input name="accept" type="submit" style="background: url(image1.png) no-repeat;" value="Continue"&gt; &lt;input name="zone" type="hidden" value="$PORTAL_ZONE$"&gt; &lt;/form&gt; &lt;/div&gt; &lt;div class="column"&gt; &lt;form name="login_form" method="post" action="$PORTAL_ACTION$"&gt; &lt;input name="redirurl" type="hidden" value="https://url"&gt; &lt;input name="accept" type="submit" style="background: url(image2.png) no-repeat;" value="Continue"&gt; &lt;input name="zone" type="hidden" value="$PORTAL_ZONE$"&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt;</pre> <p><br /></p>
P粉345302753
P粉345302753

全部回复(1)
P粉851401475

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>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号