Question

我已经做了很多次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！

Answer 1

您可以通过对各种元素的背景属性进行一些创造性使用来实现这一目标：

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

如何制作CSS - 角度图像+背景？和身高 - 100％或自动？

1 个答案: