Question

我制作了一个英雄部分，内容与边框重叠。这是它的样子：

我想删除该灰色区域以使其透明并使背景可见。但正如你可以看到它在边界重叠。因此，我不希望看到边界成为罢工。内容和图像是动态的，因此宽度可能会发生变化。

现场演示：On Codepen

HTML

        <div class="wrap">
    <div class="border">
        <h1 class="hero-title">We make your website beautiyul & usable </h1>
  <span class="attr">— Citation, ABC Inc</span>
    </div>
        </div>

CSS

@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900);

body {
  background: url('https://source.unsplash.com/category/nature') no-repeat center center #333;
  color:#FFF;
  font-family: "Playfair Display", Georgia, serif;
  background-size:cover;
}

.wrap {
  max-width:1200px;
  margin:0 auto;
  padding:130px 20px;
}

.border {
  border:solid 10px #FFF;
  text-align:center;
}

.attr {
  position:relative;
  top:-45px;
  font-size:20px;
  display:block;
}

.hero-title {
  font-weight:700;
  font-size:90px;
  text-align:center;
  margin:0 50px;
  padding:0;
  position:relative;
  top:-75px;
  background:#8b8b8b;
  display:inline-block;
}

现场演示：On Codepen

寻找仅限CSS的解决方案。任何帮助，将不胜感激。提前谢谢。

Answer 1

我已经在css中进行了更改，最终的css应该像

@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400, 700, 900);
 body {
    background: url('https://source.unsplash.com/category/nature') no-repeat center center #333;
    color:#FFF;
    font-family:"Playfair Display", Georgia, serif;
    background-size:cover;
}
.wrap {
    max-width:1200px;
    margin:0 auto;
    padding:130px 20px;
}
.border {
    border:solid 10px #FFF;
    text-align:center;
    position:relative;
}
.attr {
    top:-45px;
    font-size:20px;
    display:block;
}
.hero-title {
    font-weight:700;
    font-size:90px;
    text-align:center;
    margin:0 50px;
    padding:0;
    top:-75px;
    display:inline-block;
}

在此处查看演示 - http://jsfiddle.net/922auw0w/

Answer 2

要删除灰色区域更改background:#8b8b8b;至background:transparent;。

因为重叠你应该添加

.border{ padding-top: 20px; }

将值20px更改为自定义值。

Answer 3

http://codepen.io/anon/pen/MazGwm

我只是＆＃34;伪造＆＃34;顶部与divs的边界。

<div class="border">
  <span class="border-top"></span>
   <span class="border-top right"></span>
        <h1 class="hero-title">We make your website beautiful & usable </h1>
  <span class="attr">— Citation, ABC Inc</span>
    </div>



.border-top{
   width:50px;
   height: 10px;
   background-color: #fff;
   float:left;
}
.border-top.right{
  float:right;
}

Answer 4

您可以使用弹性框获得响应式顶部边框。当然，如果文字包裹你的边框将是最小长度。但如果你的文字很短，他们会扩大占用可用空间。

以下是我在css中添加/更改的内容。在codepen上查看它。

.wrap{
    padding: 130px 0; /* We will put a min-width on our lines */
}
.hero-title{
    display: flex;
    margin: -80px 0 0; /* margin + padding */
    position: static; /* We don't need relative and a top -xx */
    background: transparent;
}
.hero-title::before, .hero-title::after{
    display: block;
    content: "";
    height: 0;
    min-width: 60px;
    flex: 1;
    border-top: 10px solid red; /* to see what we're drawing here */
    margin-top: 75px; /* how much the text sticks out on top */
}
.hero-title::before{
    margin-right: 10px; /* We want to prevert our borders from touching the text */
}
.hero-title::after{
    margin-left: 10px;
}
.border{
    border-top-width: 0px;
    padding-top: 5px; /* anything > 0px */
}
.attr{
    position: static; /* We don't need relative and a top -xx */
    margin: 25px;
}

Answer 5

为了使顶部边框与文本一致，我添加了一个伪元素，并获得带阴影的边框。我们需要在前设置文本宽度的下限。

而且，如果此宽度太低，我们可能需要使用多个阴影。

在我的示例中，我设置了4个阴影，但如果需要，您可以设置更多阴影。

由于顶部边框现在是假的，我需要使用侧边框（背景）的替代品

body {
  background: url('https://source.unsplash.com/category/nature') no-repeat center center #333;
  color:#FFF;
  font-family: "Playfair Display", Georgia, serif;
  background-size:cover;
}

.wrap {
  max-width:1200px;
  margin:0 auto;
  padding:70px 20px;
}

.border {
  margin-top: 0px;
  border-bottom:solid 10px white;
  text-align:center;
  overflow: hidden;
  background-image: linear-gradient(white, white), linear-gradient(white, white);
  background-size: 10px calc(100% - 70px), 10px calc(100% - 70px);
  background-position: left bottom, right bottom;
  background-repeat: no-repeat; 

}

.attr {
  position:relative;
  top:-45px;
  font-size:20px;
  display:block;
}

.hero-title {
  font-weight:700;
  font-size:90px;
  text-align:center;
  margin:0 50px;
  padding:0;
  position:relative;
  top: 0px;
  display:inline-block;
}

.hero-title:after {
  content: "";
  position: absolute;
  height: 10px;
  width: 100%;
  background-color: transparent;
  left: 0px;
  top: 70px;
    box-shadow: 200px 0px 0px 0px white, 400px 0px 0px 0px white, -200px 0px 0px 0px white, -400px 0px 0px 0px white;
}

<div class="wrap">
    <div class="border">
        <h1 class="hero-title">We make beatifull webs</h1>
    </div>
</div>

如何通过隐藏边框使文本透明？

5 个答案: