Question

我的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;
    }
}

图像的底部似乎被切断了：

enter image description here

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

enter image description here

如您所见，图像失真。

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

小提琴上使用的图像：

enter image description here

.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>

Answer 1

我要做的是创建一个背景图像，该图像可以很好地用作重复图案（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>

顺便说一句，以下是如何裁剪背景以使拼贴看起来正确：

enter image description here

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

1 个答案: