Question

您好我有一些文字和一行我需要通过文字而不重叠。

这是目标：

这是我到目前为止所做的：

有些原因我无法让文字过于强大并将其放在后面。我已尽力自己解决这个问题，但我失败了所以我决定转向堆栈溢出。

这是HTML：

<div class="section-3-left">
  <div class="section-3-left-line"></div>
  <div class="section-3-left-text">
    <p>CASE RESULTS</p>
  </div>
</div>

和CSS：

.section-3-left {
  width: 100%;
  height: 500px;
  position: absolute;
}

.section-3-left-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 383px;
    text-align: center;
}

.section-3-left-line {
    position: absolute;
    left: 0;
    top: 250px;
    height: 1px;
    width: 102.8%;
    background-color: #c61000;
}

这是jsfiddle链接：

jsfiddle

任何帮助都会受到极大的关注。谢谢！

Answer 1

＆＃13;

    <style>
        .section-3-left {
            width: 100%;
            height: 500px;
            position: absolute;
        }

        .section-3-left-text {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 383px;
            text-align: center;
        }

        .section-3-left-line {
            position: absolute;
            left: 0;
            top: 250px;
            height: 1px;
            padding-right: 40%;
            background-color: #c61000;
        }

        .section-3-right-line {
            position: absolute;
            right: 0;
            top: 250px;
            height: 1px;
            padding-left: 40%;
            background-color: #c61000;
        }
    </style>

<body>
<div class="section-3-left">
    <div class="section-3-left-line"></div>
    <div class="section-3-right-line"></div>

    <div class="section-3-left-text">
        <p>CASE RESULTS</p>
    </div>

＆＃13;

Answer 2

使用z-index进行游戏。我在文本中添加了额外的background-color来模拟图像。如果您将该行的z-index设置为1，则会在文本顶部看到红线。我希望这会有所帮助。

.section-3-left {
  width: 100%;
  height: 500px;
  position: absolute;
}

.section-3-left-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 383px;
    text-align: center;
    background-color:green;
}

.section-3-left-line {
    position: absolute;
    left: 0;
    top: 250px;
    height: 1px;
    width: 102.8%;
    background-color: #c61000;
    z-index:-1;
}

<div class="section-3-left">
  <div class="section-3-left-line"></div>
  <div class="section-3-left-text">
    <p>CASE RESULTS</p>
  </div>
</div>

Answer 3

这是css和html使用两个潜水创建行并使用@media使其响应

.section-3-left {
    width: 100%;
    height: 500px;
    position: absolute;
}

.section-3-left-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;

    text-align: center;
}

.section-3-left-line {
    position: relative;
    left: 0;
    top: 250px;
    height: 1px;
    width: calc(100% - 55%);
    background-color: #c61000;
}
.section-3-right-line {
    background-color: #c61000;
    float: right;
    height: 1px;
    position: relative;
    top: 250px;
    width: calc(100% - 55%);
}
@media only screen and (max-width: 500px) {
    .section-3-right-line{
        width: calc(100% - 70%)!important;
    }
    .section-3-left-line {
        width: calc(100% - 70%)!important;
    }
}
<div class="section-3-left">
<div class="section-3-left-line"></div>
<div class="section-3-right-line"></div>
<div class="section-3-left-text">
    <p>CASE RESULTS</p>
</div>

Answer 4

您可以使用以下代码实现这一点，请参阅我们并不希望使用其他代码来指定before and after的红线.section-3-left-text，因此不需要.section-3-left-line。相反，在:before and :after中使用伪选择器.section-3-left-text并使用vw作为percentage对齐它们的样式不会起作用。这样，您的image将bottom然后text与right and left-side border一起，请尝试如下

＆＃13;

.section-3-left{
  width: 100%;
  height: 300px;
  position:relative;
  overflow:hidden;
}
.section-3-left > img{
   width:100%;
   height:100%;
   position:absolute;
   top:0;
   left:0;
   z-index:1;
}
.section-3-left > .section-3-left-text{
  position:absolute;
  z-index:9;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:transparent;
 }
.section-3-left > .section-3-left-text:before{
 content:'';
 width:50vw;
 height:1px;
 background:red;
 position:absolute;
 z-index:2;
 top:50%;
 left:-50vw;
 transform:translate(0,-50%);
}
.section-3-left > .section-3-left-text:after{
 content:'';
 width:50vw;
 height:1px;
 background:red;
 position:absolute;
 z-index:2;
 top:50%;
 right:-50vw;
 transform:translate(0,-50%);
}

＆＃13;

<div class="section-3-left">
  <div class="section-3-left-text">
    <p>CASE RESULTS</p>
  </div>
  <img src="http://placehold.it/1250x500">
</div>

＆＃13;

选中jsFiddle。

Answer 5

我曾经在我的一个项目中完成了几乎相同的任务。根据经验，我有一个小的解决方法，你可以在不多的代码行中实现这一点。

我在这里做了什么：

为所有元素实现box-sizing hack行为border-box（即包括填充），
创建了一个带有图片背景的.wrapper框。我们的内容在这里，标题为两侧的线条，
使用CSS伪元素和背景渐变来生成.title两侧的线条，
使用table布局样式将线条和标题文字对齐在一行中，并自动调整宽度（无论文本的长度如何），
通过给线宽度小于50％来划分线条，然后左右拉动它们以显示空间
在.title添加了填充以使行显示为包含，而不是流失
稍微装饰.title，使其看起来与您在问题中分享的图像一样接近

*,
*:before,
*:after {
  box-sizing: border-box;
}

.wrapper {
  background: #333 url(https://unsplash.it/1200/1000) 0 0 no-repeat / cover;
  padding: 1.5em;
  font-family: sans-serif;
  color: rgba(255, 255, 255, .9);
}

.title {
  display: table;
  white-space: nowrap;
  width: 100%;
  text-align: center;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 0 2.5%;
}

.title:before,
.title:after {
  content: '';
  position: relative;
  width: 45%;
  display: table-cell;
  background: linear-gradient(180deg, transparent, currentColor, transparent);
  background-position: 50%;
  background-repeat: repeat-x;
  background-size: 1px auto;
}

.title:before {
  right: 2.5%;
}

.title:after {
  left: 2.5%;
}

<div class="wrapper">
  <div class="title">Case Studies</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, consequuntur in, laudantium molestiae dolore voluptate hic blanditiis illo. Reprehenderit fugit assumenda voluptates alias reiciendis eum culpa atque consectetur unde ipsum.</p>
  <p>Quaerat tempore dolores harum quasi aliquam mollitia ipsum officiis. Provident voluptatem, alias atque, pariatur quae placeat ducimus nemo id repudiandae porro natus nobis maxime, impedit ipsum consequatur fugit error molestiae?</p>
  <p>Necessitatibus eligendi, quis, itaque aperiam omnis veritatis quia sequi, ea officiis hic quasi, deserunt blanditiis? Nam eligendi molestias sit cum deleniti. Distinctio id ea blanditiis incidunt, voluptatum, commodi culpa suscipit.</p>
</div>

同时查看“整页”视图中的演示片段。

我希望能够很好地回答这个问题。干杯，快乐学习！

Answer 6

.section-3-left {
  width: 100%;
  height: 500px;
}

.section-3-left-text {
  position: relative;
  text-align: center;
  padding: 15px 0;
}

.section-3-left-text p {
  background: #f3f5f6;
  display: inline-block;
  margin-top: -30px;
  padding: 10px;
}

.section-3-left-text:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  left: 0;
  margin-top: 8px;
  background-color: #c61000;
  z-index: -1;
}
<div class="section-3-left">

  <div class="section-3-left-text">
    <p>CASE RESULTS</p>
  </div>
</div>

Fiddler https://jsfiddle.net/ya9rvsbe/

带来文本前面的行div

6 个答案: