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

使用网站标题的图像背景
网站标题显示在网站标题图片
背景色背景色：rgba（0,0,0,0.5）;标题背后。

Answer 1

我添加了一些＆lt; mark style =＆＃34; background-color：blue;＆＃34;＆gt;＆lt; /标记＆GT;标题以突出显示颜色。这应该允许颜色显示在图像前面。

<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;
}

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

1 个答案: