覆蓋2文本HTML/CSS

-1

好吧，所以我基本上想要2個標題重疊海誓山盟，讓白色的一個看起來像一個黑色的邊框，但我似乎無法弄清楚，淺灰色的盒子是div。覆蓋2文本HTML/CSS

文件：

body { 
 
\t background-image: url("indexbg.jpg"); 
 
\t background-size: cover; 
 
\t background-repeat: no-repeat; 
 
\t background-attachment: fixed; 
 
} 
 
h1.titleTATF { 
 
\t text-align: center; 
 
\t font-family: "coalition"; 
 
\t font-size: 100px; 
 
\t color: black; 
 
} 
 

 
h1.shadowTATF { 
 
\t text-align: center; 
 
\t font-family: "coalition"; 
 
\t font-size: 104px; 
 
\t color: white; 
 
} 
 

 
div.wrapper { 
 
\t position: absolute; 
 
\t left: 50%; 
 
\t transform: translate(-50%, 0%); 
 
\t background: rgba(100, 100, 100, 0.25); 
 
\t width: 90%; 
 
\t text-align: center; 
 
} 
 

 
@font-face { 
 
\t font-family: coalition; 
 
\t src: url(Coalition.tff); 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <link rel="icon" href="tabicon.png"> 
 
\t \t <link rel="stylesheet" type="text/css" href="index.css"> 
 
\t </head> 
 
\t <body> 
 
\t \t <div class="wrapper"> 
 
\t \t \t <h1 class="shadowTATF">TATF</h1> 
 
\t \t \t <h1 class="titleTATF">TATF</h1> 
 
\t \t </div> 
 
\t </body> 
 
</html>

來源

2017-04-19 Legend

你爲什麼不使用文字陰影？ – RasmusGlenvig

那麼文字陰影只會將陰影添加到文本的一邊，它不是文字的輪廓 – Legend

我會爲你做一個示例 – RasmusGlenvig

您可以用文字陰影，而不是重疊的2個標題，實現這一目標。

.titleTATF { 
 
    text-align: center; 
 
\t font-family: "coalition"; 
 
\t font-size: 104px; 
 
\t color: white; 
 
    text-shadow: 
 
    -1px -1px 0 #000, 
 
    1px -1px 0 #000, 
 
    -1px 1px 0 #000, 
 
    1px 1px 0 #000; 
 
}

<div class="wrapper"> 
 
    <h1 class="titleTATF">TATF</h1> 
 
</div>

來源

2017-04-19 12:58:01 RasmusGlenvig

覆蓋2文本HTML/CSS

回答

相關問題