Text opacity with black background

Question

I'm trying to create a page where I have a background image with text on top of it (see attached picture)

I want to achieve something where the background is more dark (just the part of the background picture where text is written), so that the text is more visible.

I tried doing something like this:

by setting the background-color: black and opacity: 0.5; but I don't want a black 'box' or sharp edged block. What I want is kind of a black shadow in the background so that it looks more soothing to the viewer. Does anybody has any suggestions for this?

Post the code you've tried to make this work. We can then try to help you get through a sticking point. Stack Overflow is not a free coding writing service. — Michael Benjamin, Dec 27 '16 at 20:23

score 0 · Answer 1 · answered Dec 27 '16 at 20:23

0

I think you're looking for text shadow.

text-shadow: 0 0 10px #000000;

answered Dec 27 '16 at 20:23

Serg Chernata

12,280
6
32
50

score 0 · Answer 2 · answered Dec 27 '16 at 20:23

I'd recommend you read about text-shadow over at CSS Tricks. Something like this could do the trick:

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

If you'd prefer to use a shape in the background, you can tweak your box like so:

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 */

score 0 · Answer 3 · answered Dec 27 '16 at 20:28

What you can do is create one layer under text with :after pseudo-element and use linear-gradient as background on that element. Note that you need to create stacking-context so you can set 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>

Moob · Answer 4 · 2016-12-27T20:49:46.217

You could use multiple text-shadows to give your text a dark edge and shadow:

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>

Or give the text a semi-transparent background colour and a blurred box shadow:

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>

Or all three!

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>

score 0 · Answer 5 · answered Dec 27 '16 at 20:38

0

does this answer your question ?

Text shadow effect

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

https://jsfiddle.net/sec9mvct/

answered Dec 27 '16 at 20:38

Mohamed El Allali

1
3

Text opacity with black background

5 Answers5