为已有图像背景的标题添加背景颜色

Question

这是fiddle

我已经为网站标题添加了背景图片，但还需要为网站标题文本添加背景，并使用最少的填充。当我添加标题背景颜色时，它显示在背景图像后面，我需要它显示在标题后面，以便它漂浮在图像的标题部分上。

<header class="site-header"><div class="wrap"><div class="title-area"><p class="site-title"><a href="http://local.dev/">Lighter Background</a></p></div></div></header>

.site-title a { 
background: url('https://s24.postimg.org/i5zlke6mt/cropped_Snow_2.jpg') no-repeat !important; 
}

.site-title a {
    background-color: rgba( 0, 0, 0, 0.5 );  
    padding: 3% 10%;
    margin: 0 0 3% 0;
    display: inline-block;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px; 
    color: #fff;
}

第一条 CSS 规则由主题和网站应用程序生成。第二个是手动添加到样式表中的。

编辑：像这样https://divibooster.com/wp-content/uploads/2014/10/divi-theme-semi-transparent-background.png

1. 网站标题带有图片背景
2. 网站标题图片上显示的网站标题
3. 还有一个背景色 background-color: rgba( 0, 0, 0, 0.5 );在标题后面。

Answer 1

我在您的标题中添加了一些 以用颜色突出显示它。这应该允许颜色显示在您的图像前面。

<header class="site-header"><div class="wrap"><div class="title-area"><p class="site-title"><a href="http://local.dev/"><mark style="background-color: blue;">Lighter Background</mark></a></p></div></div></header>

.site-title a { 
background: url('https://s24.postimg.org/i5zlke6mt/cropped_Snow_2.jpg') no-repeat !important; 
}

.site-title a {
    background-color: rgba( 0, 0, 0, 0.5 );  
    padding: 3% 10%;
    margin: 0 0 3% 0;
    display: inline-block;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px; 
    color: #fff;
}