How to add semi-transparent highlight to text?

Question

I am trying to figure out how to add some semi-transparent highlighting to text and have be able to change it's color. I have see it quite a bit lately and am wondering what would be the best way to go about it. So basically the highlight is like a selection highlight but being visible all of the time.

Can anyone help me out with this? Thanks.

Answer 1

It's done the same as normal highlighting, but with rgba.

.highlighted {
    background-color: rgba(0,0,0,.5);
}

<span class="highlighted">This text is highlighted.</span>

http://css-tricks.com/rgba-browser-support/

Answer 2

You can also do this with hexadecimal color code

.text-with-background { background-color: #00000080 }

<div class="text-with-background">This text is highlighted with 50% transparency</div>

more on this topic https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4