div邊框透明背景上的文字

如何在border div上放置一些文字，以便文字有transparent background它與背後的圖像相匹配？div邊框透明背景上的文字

的問題是，background-image有一些形狀和多種顏色，所以我不能把只是一些背景顏色的文本，因爲它不適合。

例子：

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
body { 
 
    margin: 0; 
 
    background: url(http://wallpoper.com/images/00/45/05/47/green-background-2_00450547.jpg); 
 
} 
 
#main { 
 
    margin-top: 100px; 
 
    -webkit-border-radius: 20px; 
 
    -moz-border-radius: 20px; 
 
    border-radius: 20px; 
 
    border: 1px solid #000000; 
 
} 
 
#main h2 { 
 
    font-size: 60px; 
 
    font-weight: 700; 
 
    text-align: center; 
 
    margin: -40px 0 0; 
 
    background: transparent; /* somehow remove the border behind the text */ 
 
    padding: 0 20px; 
 
}

<div id="main"> 
 
    <h2>Star players</h2> 
 
    <ul> 
 
    <li>foo</li> 
 
    <li>bar</li> 
 
    </ul> 
 
</div>

JSFiddle

來源

2015-06-02 Vucko

@downvoter如果這是一個簡單的任務，請自由地發佈答案。 – Vucko

也許是這樣的http://jsfiddle.net/soledar10/uprkj7kj/ – Dmitriy

@Dmitriy這是一個很好的解決方案，但我可以，它不想'FF'中的文本對齊？ – Vucko

您可以使用一個字段，而不是一個div：

HTML：

<fieldset> 
    <legend>Test</legend> 
</fieldset>

CSS：

legend { 
    text-align: center; 
    width: 100%; 
}

來源

2015-06-03 08:25:02 KittMedia

最好，直截了當的答案。不錯 –

這個解決方案解決了我的問題，tnx。 – Vucko

所以，你要看到文本後面的一件事2層，但不會是兩者之間的其他東西......這本身就是相當反直覺。不知道你會做到這一點，除非你使用邊框圖像和CSS漸變，這總是有點複雜，這不會取決於文本的大小和寬度。

例如

HTML

<div class="gradborder-box"><div class="inner"><h2>Hello WORLD</h2></div></div>

CSS

.gradborder-box{ 
margin: auto; 
    width: 350px; 

    background: transparent; 
    border: 2px solid transparent; 

    -webkit-border-image: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 68%, rgba(0,0,0,1) 100%); 
    border-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 68%, rgba(0,0,0,1) 100%); 
    border-image-slice: 1; 
}

H2 {字體大小：1.2em; text-align：center; margin-top：-10px;} .inner {height：150px;寬度：100％; border-bottom：2px solid＃000;邊距：-2px;}

CodePen

這已經做了CHROME - 你需要在正確的邊界圖像標記添加了其他瀏覽器（-moz-邊界圖像等）。這只是CSS3。

來源

2015-06-03 09:04:15

「內部」div用於添加實心底部邊框，沒有底部邊框將看起來像頂部。可能可以將漸變更改爲徑向或某物以避免這種情況，但這會非常煩人。希望能讓你在體面的賽道上。 –

哦，你不會那樣圓圓的，對不起。 –

哦，或者只是使用fieldset @ @ KittMedia .....最好的答案。 –

div邊框透明背景上的文字

回答

相關問題