如何讓標題中的褪色線條有所反應？

我在這個標題中有一行 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)); 
}

反正有做這一行響應，所以無論多久tilte是，線會變短，但會保持衰落效果？的

來源

2017-08-07 user3458635

是否有可能包括更多的CSS和HTML來演示這個問題？ – showdev

有有幾個解決方案，但是最安全和最簡單的，我是使用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; 
    } 
}

來源

2017-08-07 17:03:37

非常感謝！你真的幫助了我=） – user3458635

-1

使用linear-gradient代替-webkit-gradient

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

，我想background-size: cover;和background-repeat: no-repeat;將有助於

來源

2017-08-07 16:56:25

你可以嘗試這樣的事情，如果你知道你的背景顏色

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

來源

2017-08-07 16:59:09

如何讓標題中的褪色線條有所反應？

回答

相關問題