如何在前面使用透明文字製作透明黑色背景？

我希望h1中的文本具有透明的黑色背景。我不能讓背景顏色出現，更不用說使它透明。如何在前面使用透明文字製作透明黑色背景？

h1, 
 
h2, 
 
h3, 
 
h4, 
 
h5, 
 
h6 { 
 
    text-align: center; 
 
    font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif; 
 
} 
 

 
h1 span { 
 
    background-color: Black; 
 
    color: DeepSkyBlue; 
 
    -webkit-animation: mymove 10s infinite; /* Chrome, Safari, Opera */ 
 
    animation: mymove 10s infinite; 
 
} 
 

 
/* Chrome, Safari, Opera */ 
 
@-webkit-keyframes mymove { 
 
    50% {color: CornflowerBlue;} 
 
} 
 

 
/* Standard syntax */ 
 
@keyframes mymove { 
 
    50% {color: CornflowerBlue;} 
 
}

<h1> 
 
    <span>The Last Will and Testament ofEric Jones</span> 
 
</h1>

來源

2015-10-08 software is fun

集'背景：RGBA（0，0，0，0.5）;'在任何你想有一個半透明的背景。這將增加50％的透明黑色背景。 – Aeolingamenfel

謝謝。但我的背景甚至沒有顯示。我做錯了我的CSS？我也嘗試過類（h1 class =「textDisplay」，並將h1跨度改爲.textDisplay –

你需要把背景上h1 ......不跨度。

h1, 
 
h2, 
 
h3, 
 
h4, 
 
h5, 
 
h6 { 
 
    text-align: center; 
 
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; 
 
} 
 
h1 { 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
} 
 
h1 span { 
 
    color: DeepSkyBlue; 
 
    -webkit-animation: mymove 10s infinite; 
 
    /* Chrome, Safari, Opera */ 
 
    animation: mymove 10s infinite; 
 
} 
 
/* Chrome, Safari, Opera */ 
 

 
@-webkit-keyframes mymove { 
 
    50% { 
 
    color: CornflowerBlue; 
 
    } 
 
} 
 
/* Standard syntax */ 
 

 
@keyframes mymove { 
 
    50% { 
 
    color: CornflowerBlue; 
 
    } 
 
}

<h1><span> 
 
The Last Will and Testament of 
 
Eric Jones</span></h1>

來源

2015-10-08 16:22:15

我發現有一個競爭的css文件覆蓋了我的值 –

您可以使用RGBA爲背景色：

h1, 
 
h2, 
 
h3, 
 
h4, 
 
h5, 
 
h6 { 
 
    text-align: center; 
 
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; 
 
} 
 
h1 span { 
 
    background-color: rgba(0, 0, 0, 0.2); 
 
    color: DeepSkyBlue; 
 
    -webkit-animation: mymove 10s infinite; 
 
    /* Chrome, Safari, Opera */ 
 
    animation: mymove 10s infinite; 
 
} 
 
/* Chrome, Safari, Opera */ 
 

 
@-webkit-keyframes mymove { 
 
    50% { 
 
    color: CornflowerBlue; 
 
    } 
 
} 
 
/* Standard syntax */ 
 

 
@keyframes mymove { 
 
    50% { 
 
    color: CornflowerBlue; 
 
    } 
 
}

<h1><span> 
 
The Last Will and Testament of 
 
Eric Jones</span></h1>

來源

2015-10-08 16:20:12

謝謝。我看到示例代碼正在運行，但是當我複製您的css並將其放入我的css中時，我甚至沒有看到背景出現 –

設置背景色與RGBA（），其中「阿爾法」是不透明度。你可以得到它在這裏工作：https://jsfiddle.net/0L1daf1v/

h1 span { 
    background-color: rgba(0,0,0,0.5); 
    color: DeepSkyBlue; 
    -webkit-animation: mymove 10s infinite; /* Chrome, Safari, Opera */ 
    animation: mymove 10s infinite; 
}

來源

2015-10-08 16:36:40 FrontDev

如何在前面使用透明文字製作透明黑色背景？

回答

相關問題