Průhledné pozadí za textem

Zdravím,
byl bych rád za radu, jak nakódovat něco takového:
[img]blob:https%3A//drive.google.com/1b187270-5ee0-42f5-9d29-b13ff5d402fb[/img]

Jde o to že:
- to červené pozadí za textem je jemně průhledné (bude za ním fotka). Proto je použit 1px png obrázek s průhlednou barvou.
- potřebuji aby barva za textem "kopírovala" text, takže je potřeba inline element => display: inline
Jak ale nastavit padding, aby se text nelepil na okraje té červené barvy? Když nastavím padding left a right, tak se odsadí pouze první řádek na začátku a poslední na konci. Takže text na začátku druhého řádku je neosazen a tím nezarovnán.
- barva jednotlivých řádků se nesmí překrývat, protože jinak vytvoří nepěknou dvojtou čáru (tím že jsou na sobě dvě průhledné vrstvy

Budu rád za rady. Děkuji mockrát

Obrázek: blob:https%3A//drive.google.com/1b187270-5ee0-42f5-9d29-b13ff5d402fb

Tak ještě jednou :) Zde je obrázek: drive.google.com/file/d/0B_vSA_P1cry3LWljSTgwN1RFcEU/view?usp=sharing

@Bubak: Ten outline je docela dobrý nápad. Jen asi bude potřeba nastavit barvu se 100% opacity, jinak se mi nepodařilo napravit správně velikost řádků, aby se barva nepřekrývala. Ale to nakonec nějak přežiji.

Jinak asi není možné nastavit odlišnou outline šířku pro každou stranu že? Zkoušel jsem outline: 3px 5px 5px 5px solid rgba(220,150,50,.3); ale to nefungovalo :(