Question

我不知道css是否是使其成功的最佳方式......我有这个图像：

我希望我的所有形式都在其中。我有这个aspnet.mvc 4网站，所以我在razor上有这个：

<div id="form">
      @using (Html.BeginForm("Foo", "Boo", FormMethod.Post, new { @class = "form-horizontal" }))
      {
           //form here
      }
</div>

我的布局：

<!-- container-->
<div class="main-content">
    <div class="container">
        @RenderBody()
    </div>
</div>
<!-- /container -->

CSS：

.main-content {
    padding: 20px;
    margin: 0;
    width: 100%;
}

.container {
    margin: 0 auto;
    width: 100%;
}

#form {
    margin: 0 auto;
}

.form-horizontal {
    max-width: 700px;
    width: 100%;
    background-color: #ffffff;
    font: bold 14px sans-serif;
    margin: 0 auto;
    border-width: 150px;
    border-style: solid;
    border-image: url(../../images/Iphone.png) 25%;
}

我在Chrome上有预期的结果，但在IE 8/7上没有（当然）

这有什么解决方法吗？什么是最好的方法？ PS：形式包含可以用一些javascript成长，这就是为什么我需要“弹性”。

@fordareh，我尝试了你的解决方案，但它没有用。我在切割图像之前尝试了这个：

我的想法是简单地在Y位置重复“中间图像”，但是在两侧......我无法做到......

：（

Answer 1

您将此背景图像作为单个图像存在的问题是，iPad表面的眩光会阻止其任何部分重复出现。我已经使用这个小提琴中的css和图像创建了类似的效果：

https://jsfiddle.net/fordareh/1jzgk34f/

诀窍是隔离顶角和底角，使它们不会膨胀，因为这会使它们扭曲。然后，你缩放中间切片，使它很好地连接到眩光（使用过滤器黑客应该可以很好地工作

HTML：

<div class="top">
  <div class="bottom">
    <div class="middle">
      <div class="form-horizontal">

      </div>
    </div>
   </div>
 </div>

的CSS：

.top {
  width: 535px; 
  background: url('http://i.stack.imgur.com/WTrcf.png') no-repeat;
  padding-top: 55px;
}

.bottom {
  background: url('http://i.stack.imgur.com/65D0M.png') no-repeat bottom;
  padding-bottom: 55px;
}

.middle {
  background-image: url('http://i.stack.imgur.com/0N1JX.png');
  background-size: 100% 100%;
  overflow: auto;

  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
  src='http://i.stack.imgur.com/0N1JX.png',
  sizingMethod='scale')\9;

  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
  src='http://i.stack.imgur.com/0N1JX.png',
  sizingMethod='scale')"\9;

}

.form-horizontal {
  min-height: 400px;
  margin: 0;
  padding: 0 75px;
}

图片：

或者，您可以修复.form-horizontal的高度并设置“overflow：auto”以简单地强制滚动表单。

边界图像IE 8＆amp; amp;的解决方法IE 7

1 个答案: