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

发布于 2024-09-18 14:01:33 字数 1210 浏览 4 评论 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 可以吗？我正在等待答案...
真诚的，阿雷库！

原文

I have already made CSS a lot of times, but did not work and a lot of glitches ...
I will show picture - glitch:
See picture - http://beta.areku-developstudio.org.ua/new.png

See picture (this is necessary, as better quality):
See picture2 - http://beta.areku-developstudio.org.ua/new2.png

How to make CSS - angles-image + background? And height - 100% or auto?
Sample 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>

Choose other ways to make CSS + HTML. Can jQuery? I am waiting for an answer ...
Sincerely, Areku!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寂寞笑我太脆弱 2024-09-25 14:01:33

您可以通过在各种元素上创造性地使用背景属性来实现这一点：

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

You could do that with some creative uses of the background property on your various elements:

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

Then the CSS would be as follows:

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

回复收藏 0 原文

~没有更多了~