JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
    <div id="inner">
        <div id="text">
            O
        </div>
    </div>
</div>

CSS

#outer {
    width: 300px;
    height: 200px;
    background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Hopetoun_falls.jpg/300px-Hopetoun_falls.jpg);
}

#inner {
    border-radius: 100px;
    width: 100px;
    height: 100px;
    background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Bachalpseeflowers.jpg/300px-Bachalpseeflowers.jpg)
}

#text {
    width: 50px;
    margin: 0 auto;
    xpadding: 24px 0;
    font-weight: bold;
    font-size: 64px;
    background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Hopetoun_falls.jpg/300px-Hopetoun_falls.jpg);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /*background-position: 10px 15px;*/
    
}