0

我已经做了很多次 CSS，但是没有用，还有很多小故障......
我将展示图片 - 故障：
参见图片 - http://beta.areku-developstudio.org.ua/new.png

见图片（这是必要的，因为质量更好）：
见图片2 - http://beta.areku-developstudio.org.ua/new2.png

如何制作 CSS - 角度图像 + 背景？和高度 - 100% 还是自动？
示例 HTML：

<div id="conteiner" class="main">
    <div class="top_left_corner">
        <div class="top_right_corner">
            <div class="bottom_left_corner">
                <div class="bottom_right_corner">
                    <div id="content">
                        <br/><br/>
                        Hello Areku<br/>
                        Hello Areku<br/>
                    </div>
                    <br/><br/>
                </div>
            </div>
        </div>
    </div>    
</div>

选择其他方式制作 CSS + HTML。可以 jQuery 吗？我正在等待答案......
真诚的，Areku！

4

1 回答 1

0

您可以通过对各种元素的背景属性进行一些创造性的使用来做到这一点：

<html>
  <body>
     <div id="content">
        Your content
     </div>
     <div class="corner right"></div>
     <div class="corner left"></div> 
  </body>
</html>

那么 CSS 将如下所示：

/* Following 2 rules create min-height 100% for your content and body */
html,
body {
  height: 100%;
}

#content {
  min-height: 100%;
}

/* html and body create the fixed position bottom right/left corners */
html {
  background: url(bottom-right.png) no-repeat fixed 100% 0;
}

body {
  background: url(bottom-left.png) no-repeat fixed 0 0;
}

/* top right/left corners are handled by 2 divs */
.corner {
  position: fixed;
  top: 0;

  width: 50px;  /* width of your background image corner */
  height: 50px; /* height of your background image corner */    
}

.left {
  left: 0;
  background: url(top-left.png) no-repeat 100% 0;
}

.right {
  right: 0;
  background: url(top-right.png) no-repeat 100% 0;
}
于 2010-09-08T13:17:28.393 回答