html - 如何使用 CSS 在顶部和底部制作一个打开的盒子作为容器？

标签 html css

我看了一些评论并添加了一张图片，因为我不清楚，抱歉，感谢您的帮助!

我想制作一个包含所有信息的矩形边框的网站，但是这个容器应该在顶部和底部打开边框。我有一个图像作为背景，所以我不能制作一个简单的 div 来隐藏容器的某些部分。当然这个容器应该是响应式的。 我认为这很容易，但我一直在努力解决这个问题，但无法让它发挥作用。 提前致谢!

我想做这个:https://ibb.co/dmwP8PM

请对此测试进行更改:

https://codepen.io/soporo123/pen/WNNxLmX 

<style type="text/css">
    body{
        background: url(https://www.gohawaii.com/sites/default/files/styles/image_gallery_bg_xl/public/hero-unit-images/11500_mauibeaches.jpg?itok=I2TvGlCa) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        color: #FFF;
        text-align: center;
    }
    .container{
        width: 94%;
        padding: 3em;
        margin: 3%;
        border: 5px solid #FFF;
        box-sizing: border-box; 
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box;
        position: relative;
    }
    .logo{
        position: absolute;
        top: -15px;
        left: 0;
        right: 0;
        margin: auto;
    }
    .logo2{
        position: absolute;
        bottom: -15px;
        left: 0;
        right: 0;
        margin: auto;
    }
</style>
<body>
    <div class="container">
        <div class="logo">LOGO</div>
        <h1 class="title">Lorem ipsum</h1>
        <div class="text">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
            <p>Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
            <p>Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        </div>
        <div class="logo2">LOGO 2</div>
    </div>
</body>

最佳答案

border-left 和 border-right 应该让你到达那里。

body{
        background: url(https://www.gohawaii.com/sites/default/files/styles/image_gallery_bg_xl/public/hero-unit-images/11500_mauibeaches.jpg?itok=I2TvGlCa) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        color: #FFF;
        text-align: center;
    }
    .container{
        width: 94%;
        padding: 3em;
        margin: 3%;
        /***************************/
        /* Change Here             */
        /***************************/
        border-left: 5px solid #FFF;
        border-right: 5px solid #FFF;
        /**** END CHANGE ************/
        box-sizing: border-box; 
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box;
        position: relative;
    }
    .logo{
        position: absolute;
        top: -15px;
        left: 0;
        right: 0;
        margin: auto;
    }
    .logo2{
        position: absolute;
        bottom: -15px;
        left: 0;
        right: 0;
        margin: auto;
    }
<div class="container">
        <div class="logo">LOGO</div>
        <h1 class="title">Lorem ipsum</h1>
        <div class="text">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
            <p>Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
            <p>Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        </div>
        <div class="logo2">LOGO 2</div>
    </div>

或者你可以使用border-style: solid none

body {
  background: url(https://www.gohawaii.com/sites/default/files/styles/image_gallery_bg_xl/public/hero-unit-images/11500_mauibeaches.jpg?itok=I2TvGlCa) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: #FFF;
  text-align: center;
}

.container {
  width: 94%;
  padding: 3em;
  margin: 3%;
  border: 5px solid #FFF;
  /** ONE LINE CHANGE BELOW **/
  border-style: solid none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  position: relative;
}

.logo {
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  margin: auto;
}

.logo2 {
  position: absolute;
  bottom: -15px;
  left: 0;
  right: 0;
  margin: auto;
}
<div class="container">
  <div class="logo">LOGO</div>
  <h1 class="title">Lorem ipsum</h1>
  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
      ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
      augue duis dolore te feugait nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
      ex ea commodo consequat.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
      ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
      augue duis dolore te feugait nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
      ex ea commodo consequat.</p>
  </div>
  <div class="logo2">LOGO 2</div>
</div>

关于html - 如何使用 CSS 在顶部和底部制作一个打开的盒子作为容器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58422225/

上一篇：javascript - 尝试将数据输入表单，然后在同一页面和弹出窗口中显示数据

下一篇：javascript - 圆滑的显示一个在中心

相关文章：

html - 如何仅使用 CSS(无 javascript)设置动态响应 div？

css - 在 CSS 中转换属性

html - ng-multiselect-dropdown 自定义 CSS

angularjs - 屏幕(html 页面)由于在 phonegap(onsen ui)上拉动刷新 Hook 而在向上或向下滚动时剧烈抖动

javascript - 最小形式 BACK 按钮 questionNumber interference

html - 如何删除由于 CSS 相对位置而导致的空白？

javascript - 将 HTML 元素传递给 Javascript 函数

javascript 在 textarea onload 中选择文本

html - 下载的网站模板在 Mac OS X 上似乎充满了可执行文件，我应该担心吗？

javascript - 将普通桌面菜单转换为选择选项菜单(适用于移动版本)

©2024 IT工具网  联系我们