文字透明度与黑色背景

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/