文字透明度與黑色背景

Question

我想創建一個網頁，我有一個背景圖片

我想實現的東西在它上面的文字（見附圖），其中背景是更黑暗的（只是背景圖片中寫入文字的部分），以便文字更加明顯。通過設置背景色

：

我試圖做這樣的事情黑色和不透明度：0.5; 但我不想要一個黑色的「盒子」或銳邊塊。我想要的是在背景中有一種黑色陰影，這樣看起來更舒緩。有人對此有任何建議嗎？

Answer 1

我認爲你正在尋找文字陰影。

text-shadow: 0 0 10px #000000; 

Answer 2

我建議你在CSS Tricks瞭解text-shadow了。像這樣的東西可以做的伎倆：

text-shadow: rbga(0, 0, 0, .5) 2px 2px 1px; /* color, x pos, y pos, blur */ 

如果你喜歡在後臺使用的形狀，你可以調整你的盒子，像這樣：

background-color: rgba(0, 0, 0, .5); /* 50% opacity black background will keep your text fully opaque */ 
border-radius: 10px; /* round out the corners of your shape */ 

Answer 3

你可以做的是創造一個圖層下的:after僞元素，並使用線性漸變作爲該元素的背景。請注意，您需要創建堆疊上下文，您可以設置z-index

.element { 
 
    position: relative; 
 
    height: 100vh; 
 
    background: url('http://static.memrise.com/uploads/course_photos/5524217000140501145655.jpg'); 
 
    background-size: cover; 
 
    background-position: center; 
 
    color: white; 
 
} 
 
.element:after { 
 
    position: absolute; 
 
    content: ''; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(255, 255, 255, 0.2) 100%); 
 
    z-index: 1; 
 
} 
 
h3 { 
 
    position: relative; 
 
    z-index: 2; 
 
}

<div class="element"> 
 
    <h3>Lorem ipsum dolor.</h3> 
 
</div>

Answer 4

您可以使用多個文本陰影，讓您的文字黑暗的邊緣和陰影：

h1 { 
 
    position:absolute; 
 
    top:20px; 
 
    left:20px; 
 
    margin:0; 
 
    color:white; 
 
    text-shadow:0px 0px 2px black, 0px 0px 5px black, 0px 0px 30px black; 
 
}

<img src="http://lorempixel.com/400/200/sports/5/" /> 
 
<h1>Some text</h1>

或者給文本一個半透明的背景UND的色彩和模糊的影子盒：

h1 { 
 
    position:absolute; 
 
    top:20px; 
 
    left:20px; 
 
    margin:0; 
 
    color:white; 
 
    background:rgba(0,0,0,.4); 
 
    box-shadow:0 0 10px 10px rgba(0,0,0,.4); 
 
}

<img src="http://lorempixel.com/400/200/sports/5/" /> 
 
<h1>Some text</h1>

或全部三個！

h1 { 
 
    position:absolute; 
 
    top:20px; 
 
    left:20px; 
 
    font-family:arial; 
 
    font-size:30px; 
 
    margin:0; 
 
    color: white; 
 
    text-shadow: 
 
     3px 3px 0 #000, 
 
    -1px -1px 0 #000, 
 
     1px -1px 0 #000, 
 
     -1px 1px 0 #000, 
 
     1px 1px 0 #000; 
 
    background:rgba(0,0,0,.3); 
 
    box-shadow:0 0 10px 10px rgba(0,0,0,.3); 
 
}

<img src="http://lorempixel.com/400/200/sports/5/" /> 
 
<h1>Some text</h1>

Answer 5

這是否回答你的問題？

Text shadow effect

.magic h1,.magic h3{ 
    color: #fff; 
    text-shadow: 0px 0px 30px rgba(0, 0, 0, 1); 
} 

https://jsfiddle.net/sec9mvct/