3

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).

Community
  • 1
  • 1
sarah
  • 102
  • 2
  • 10
  • 1
    **No...it's not.** Backgrounds apply to elements and unless each word is a separate element you cannot achieve the result I think you are looking for. – Paulie_D Jan 24 '16 at 11:42
  • 1
    As Paulie suggested, you'll have to give each word a span element at the least to achieve the result you want. So for every word in the example text, you'll have to style 2 span elements in the css. – adamk22 Jan 24 '16 at 11:44
  • Thanks to both of you. I can set the background of a few words easy enough, but some pages contain 50, 100+, 500+ words or more so that wont work.... I'll need to think of what backgrounds to use... Thanks.... – sarah Jan 24 '16 at 11:46
  • An option would be to use javascript to achieve this. Is it a certain word that you want to give a black/blue background? – adamk22 Jan 24 '16 at 12:00

2 Answers2

2

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.

enter image description here

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:

enter image description here

$('.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);
});
fnune
  • 5,256
  • 1
  • 21
  • 35
-1

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>
Persijn
  • 14,624
  • 3
  • 43
  • 72