編輯問題,以包括預期行為、特定問題或錯誤以及重現問題所需的最短代碼。這將有助于其他人回答問題。
由于缺乏例子,我不得不& quot算出& quot你想要的。如果我理解正確的話,您想顯示& quot影子& quot背景中的文本,意味著您希望在背景中看到微弱的文本。使用一個偽元素,我讀取了在& quot數據-文本& quot屬性,將其設置為透明文本顏色,增加了字體大小,并為其添加了小陰影。
示例# 1
.text {
margin-top: 100px;
position: relative;
text-align: center;
font-size: 20px;
font-weight: bold;
}
.text::after {
content: attr(data-text);
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translate(0, -50%);
z-index: -1;
font-size: 70px;
color: transparent;
text-shadow: 0px 0px 10px #eee, 0px 0px 10px #eee;
}
<div class="text" data-text="Your text here">
Your text here
</div>
你可以用文本的副本來偽造陰影。
div {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
}
h1 {
color: black;
z-index: 0;
}
h1:before {
content: attr(data-txt);
position: absolute;
color: rgba(120, 120, 120, .25);
left: 0;
top: 80px;
z-index: -1;
font-size: 120px;
text-shadow: 0px 0px 5px rgba(120, 120, 120, 1);
}
<div>
<h1 data-txt="TEXT">TEXT</h1>
</div>