如何創建文本的背景是這樣

我看到這樣的文字背景造型上this site ，我想知道是否有可能用css來做到這一點。

2017-04-07 Amit Singh

你說的是剛剛的高亮顯示部分？或者突出顯示的不規則形狀？ –

您可以通過不同方式實現此效果。從使用pseudo元素到SVG。看到這個片段，我使用:before,css-background和SVG。你可以嘗試其他方法。

我建議svg方法

svg{ 
 
    position: absolute; 
 
    top: 0; 
 
    z-index: -1; 
 
} 
 
h2{ 
 
    color: #333; 
 
    font-size: 44px; 
 
    padding: 5px 15px; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
h2:before{ 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: -1; 
 
} 
 
h2.shape-1:before{ 
 
    background: #e7a9a8; 
 
    border-radius: 10px; 
 
    -webkit-transform: skewX(-15deg); 
 
    transform: skewX(-15deg); 
 
    opacity: 0.65; 
 
} 
 
h2.shape-2:before{ 
 
    background-size: cover!important; 
 
    bacground-repeat: no-repeat!important; 
 
    background: url('data:image/png;base64,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'); 
 
}

<!-- using psedo elements --> 
 
<h2 class="shape-1">Public art</h2> 
 

 
<!-- using css background --> 
 
<h2 class="shape-2">Lorem Ipsum</h2> 
 

 
<!-- using svg --> 
 
<h2 class="shape-3">Lorem Ipsum 
 
    <svg version="1.1" id="architecture-bg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 374 80" style="enable-background:new 0 0 374 80;" xml:space="preserve"> 
 
<g style="fill: rgb(227, 203, 160);"> 
 
\t <path class="architecture-bg-fill" d="M23.4,76c-4.3,0-7.8-3.4-7.9-7.7c-0.1-2,0.6-3.8,1.8-5.3l-4.7,0h-0.1c-4.3,0-7.8-3.4-7.9-7.7 
 
\t \t c-0.1-4.2,3.1-7.8,7.3-8.1c-1.4-1.4-2.2-3.3-2.3-5.4c0-0.6,0-1.2,0.2-1.7C6,39.7,3.1,36.5,3,32.6c-0.1-4.3,3.3-8,7.7-8.1l2.9-0.1 
 
\t \t c-0.2-0.7-0.4-1.5-0.4-2.3c0-1.2,0.2-2.3,0.6-3.3h-0.2c-4.4,0-7.9-3.5-7.9-7.9s3.5-7.9,7.9-7.9h348.6c4.3,0,7.8,3.4,7.9,7.7 
 
\t \t c0.1,4.3-3.3,7.9-7.6,8l-2,0.1c1.6,1.6,2.4,3.9,2.1,6.3c-0.3,2.9-2.1,5.2-4.6,6.4l4,0h0.1c4.3,0,7.8,3.4,7.9,7.7 
 
\t \t c0.1,4.3-3.2,7.9-7.5,8.1l-3.4,0.2c1.4,1.4,2.2,3.2,2.3,5.3c0.1,2.4-0.9,4.6-2.6,6.1c4.2,0.2,7.5,3.6,7.6,7.8 
 
\t \t c0,4.4-3.5,7.9-7.9,7.9L23.4,76L23.4,76z" style="fill: rgb(227, 203, 160);"></path> 
 
</g> 
 
</svg> 
 
</h2>

來源

2017-04-07 05:25:27

不錯的一個...... – 7urkm3n

雙倍長度的單詞，你會注意到異常。唯一的出路就是即時產生這些亮點。 –

如何創建文本的背景是這樣

回答

相關問題