Question

我试图创建一个页面，其中我有一个带有文本的背景图像（参见附图）

我想要实现背景更暗的东西（只是背景图片中写入文字的部分），这样文字就更明显了。

我尝试过这样的事情：

通过设置背景颜色：黑色和不透明度：0.5; 但我不想要一个黑色的盒子＆＃39;或锋利的块。我想要的是背景中的黑色阴影，使观看者看起来更加舒缓。有人对此有什么建议吗？

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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>

或者为文本提供半透明的背景颜色和模糊的框阴影：

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/

文本不透明与黑色背景

5 个答案: