html – 如何确保均匀显示DIV内的背景图像

发布时间：2020-12-14 23:45:16 所属栏目：资源来源：网络整理

导读：我的ASP.net页面中有以下代码(我希望它能够响应)： div class="mobileTabsNav" div style="width: 100%; height: auto; min-height: 50px; max-height: 50px; background: #00ff00; background: url('/theImages/mobileMWBtn.png'); background-size: cover;

我的ASP.net页面中有以下代码(我希望它能够响应)：

<div class="mobileTabsNav">
    <div style="width: 100%; height: auto; min-height: 50px; max-height: 50px; background: #00ff00; background: url('/theImages/mobileMWBtn.png'); background-size: cover; text-align: center;">
        PLEASE SIGN IN
    </div>
</div>

CSS：

.mobileTabsNav
{
    display: none;
    width: 100%;
    overflow: hidden;
}
@media (max-width: 715px)
{
    .mobileTabsNav
    {
        display: block;
    }
}

似乎图像的底部被截断：

当我将其更改为background-size：100％100％;时,图像在某些屏幕上拉伸得太多,如下例所示：

如您所见,图像失真.

无论如何确保不同屏幕尺寸的曲线是相同的,还是我必须添加三个单独的图像？

小提琴上使用的图像：

.mobileTabsNav
{
    width: 100%;
    overflow: hidden;
}

<div class="mobileTabsNav">
                        <div style="float: left; background: url('http://i.stack.imgur.com/NnCbY.png') no-repeat; min-height: 50px; min-width: 10px; max-width: 10px; background-size: contain;">

                        </div>
    <div style="background: url('http://i.stack.imgur.com/KbPm8.png')"></div>
                        <div style="float: right; background: url('http://i.stack.imgur.com/rll1d.png') no-repeat; min-height: 50px; min-width: 10px; max-width: 10px; background-size: contain;">

                        </div>
                    </div>

解决方法

我要做的是创建一个背景图像,它可以很好地作为重复模式(tileable),然后使用border-radius属性来获得圆角.

在这种方法中,无论屏幕大小如何,点总是相同的大小,
并且您只需要一个图像用于所有设备.

.mobileTabsNav {
}
.mobileTabsNav .inner {
  min-height: 400px; 
  background: #00ff00 url(http://i.stack.imgur.com/M8WDz.png); 
  text-align: center;
  border-radius: 25px;
}

<div class="mobileTabsNav">
    <div class="inner">
        PLEASE SIGN IN
    </div>
</div>

顺便说一下,这里是如何裁剪背景以使平铺看起来正确：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!