文字透明度与黑色背景
问题描述:
我想创建一个网页,我有一个背景图片文字透明度与黑色背景
我想实现的东西在它上面的文字(见附图),其中背景是更黑暗的(只是背景图片中写入文字的部分),以便文字更加明显。通过设置背景色
:
我试图做这样的事情黑色和不透明度:0.5; 但我不想要一个黑色的“盒子”或锐边块。我想要的是在背景中有一种黑色阴影,这样看起来更舒缓。有人对此有任何建议吗?
答
我认为你正在寻找文字阴影。
text-shadow: 0 0 10px #000000;
答
我建议你在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 */
答
你可以做的是创造一个图层下的: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>
答
您可以使用多个文本阴影,让您的文字黑暗的边缘和阴影:
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>
答
这是否回答你的问题?
.magic h1,.magic h3{
color: #fff;
text-shadow: 0px 0px 30px rgba(0, 0, 0, 1);
}
后你一直在努力,使这项工作的代码。然后,我们可以尝试帮助您度过难关。堆栈溢出不是免费的编码写入服务。 –