CSS background for text only & not parent span/div/body? - html

Question

I'm not sure this is possible, but i was wondering if it is possible to set a background color for text only, & not the span/div/P tags that contain the text.
EG
This text here...
each character of "this" will be a black background with white text, the 'space' will have the blue background the word "text" will be a black background with white text etc....
Something like what deaf people see on some TV shows - captions...
But I don't want to contain each / every word with a div or span - as that will make the total HTML coding huge...
From what i have gathered / googled, I can set a background for an entire 'container' but not just for "text" in the container.
example: How do I set background color of text only in CSS?
The above sets the whole h1 tag as a green background.
PS - i'm only using 'green' as an example - but i've got other colours in mind, or even pictures as the background. but i want the text content to be visible..
PS, if the above can be done, is it also possible to 'opaque' the text-background ? so the actual / main background is partially visible, but keep the text "solid".
Ive used opaque, but it makes the foreground text opaque (not kept as solid).

Answer 1

This is the solution I found using JavaScript. It is definitely not only CSS, but it's as far as I could get it with minimal code:
Note: check the updated JSFiddles below! http://jsfiddle.net/fq4ez69t/1/
It finds all spaces in your "p" tags (i.e. change this to whatever you need) and substitutes them with a span with class .space so that you can style it in your CSS.
Here's the JS:
var str = document.getElementsByTagName("p")[0].innerHTML;
var newstring = str.replace(/ /g, '<span class="space"> </span>');
document.getElementsByTagName("p")[0].innerHTML = newstring;
Update #1
Just thought of this. Maybe change the getElementsByTagName("p")[0].innerHTML; to something like document.getElementsByClassName('shaded')[i]; and use this class on whatever text you want to look like that. This is done using a for loop like so:
http://jsfiddle.net/fq4ez69t/2/
Just add the class shaded to the text element you want to look like the image above and voila!
var shadedtextblocks = document.getElementsByClassName("shaded");
for(var i = 0; i < shadedtextblocks.length; i++)
{
var str = shadedtextblocks[i].innerHTML;
var newstring = str.replace(/ /g, '<span class="space"> </span>');
shadedtextblocks[i].innerHTML = newstring;
}
Update #2 - Works with background images now.
http://jsfiddle.net/37s7ex2j/
Here's an updated version that works for p and h1 tags and uses jQuery. It won't print backgrounds on top of your background image. It looks much better, but the script is a bit slower. Here's the result:
$('.shadedtext').each(function(){
//FOR P ELEMENTS
var text = $.trim($('p').text()),
word = text.split(' '),
str = "";
$.each( word, function( key, value ) {
if(key != 0) { str += " "; }
str += "<span class='shade'>" + value + "</span>";
});
$('p').html(str);
});

Answer 2

Choosing text in a container
In short: No you can not set the background of only the text in a div, or spesialy choose each color for each word.
What you can do is set the text of each container ofc:
<div class="class"></div>
.class {
//background, can also use rgba(0,0,0,0.5) <- semi transparent black.
background-color: white;
}
But I don't want to contain each / every word with a div or span - as that will make the total HTML coding huge...
Keeping your text inside inline-block elements will keep the selection to some what text only.
Example:
p {
background-color: rgba(5, 5, 5, 0.5);
color: white;
}
p.inline {
display: inline-block;
}
Inline
<p>Lorem ipsum dolar si amet</p>
Inline-block
<br>
<p class="inline">Lorem ipsum dolar si amet</p>

Answer 3

If you want something like subtitles on TV, you can add a text-shadow on your text:
.myTextClassSelector{
text-shadow: green 1px 1px, green -1px 1px, green -1px -1px, green 1px -1px;
}
<div>
<p class="myTextClassSelector">This text here</p>
And this other text here.
</div>