Question

我的标题就像这一行 Faded line。标题较长时，线条变短，褪色效果消失 Faded line2 我用这个css作为h1

中的行

.sub_title h1:before {
    content: "";
    width: 42%;
    position: absolute;
    top: 45%;
    bottom: 0;
    overflow: hidden;
    margin-left: -43.6%;
    text-align: right;
    height: 2px;
    background: -webkit-gradient(radial, 60% 0%, 0, 239% 90%, 1090, from(#5CAECE), to(#fff));
}
.sub_title h1:after {
    content: "";
    width: 42%;
    position: absolute;
    top: 45%;
    bottom: 0;
    overflow: hidden;
    text-align: right;
    height: 2px;
    margin-left: 1.5%;
    background: -webkit-gradient(radial, 60% 0%, 0, -139% 90%, 1090, from(#5CAECE), to(#fff));
}

无论如何都要使这条线响应，这样无论倾斜多长时间，线条会变短但会保持褪色效果吗？

Answer 1

有几个解决方案，但对我来说最安全和最简单的方法是使用flexbox，语义清晰，没有任何额外的膨胀，我认为工作正常：https://jsfiddle.net/prowseed/szgeag97/

整个魔力在于特定的flexbox功能：

.title {
  text-align:center;
  display:flex;
  align-items:center;

  &:before, &:after {
    content:'';
    flex: 2 1 90px;
    background:linear-gradient(to right, rgba(30,87,153,0) 0%,rgba(125,185,232,1) 60%);
    height:4px;
  }

  &:after {
    background:linear-gradient(to left, rgba(30,87,153,0) 0%,rgba(125,185,232,1) 60%);
  }

  h1 {
    flex:0 1 auto;
    padding:0 5px;
  }
}

Answer 2

如果您知道背景颜色，可以尝试类似的东西

`https://codepen.io/SashaZhardetskaya/pen/eEvmdQ#code-area`

Answer 3

使用linear-gradient代替-webkit-gradient

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

我想background-size: cover;和background-repeat: no-repeat;会有所帮助

如何使标题中的淡化线响应？

3 个答案: