Q:

Highlight text only, with opacity to the background

I have some text in my header which can be hard to see on different viewports.  So, I want to highlight it as if you select it on a website (but black with opacity instead of the default blue).  
I currently styled my header text like this:
header .header-content .header-content-inner h1 {
margin-top: 0;
margin-bottom: 0;
text-transform: uppercase;
font-weight: 700;

(site: topsok [dot] nl).  
I tried some different things with <mark> and background: in my stylesheet, but I wasn't able to add opacity to the selection.  I would like it to look exactly the same way it looks now when you manually select the text on the header.  
Any help would be appreciated!  Thanks. 

A:

Something like this? 
h1 {
    background: rgba(0,0,0,0.8);
    display: initial;
}

