分别在段落的行上显示背景色-CSS [英] background color on lines of paragraph seperately - Css

问题描述

我正在尝试在标题行上添加背景色，但是由于客户需要我做，所以无法使其完美.我的客户需要以下完全相同:
在响应模式下，它应类似于:

我要做的是在文本中添加 background-color ，但这并不完美.

背景颜色从上到下散布，尝试了很多，但无法弄清楚.
这是我的代码:

I am trying to add background color on lines of title, But I can't make it perfect as my client needs me to do. My client needs this exact same:
And in responsive mode it should look like:

And what i did is this I add background-color to text, but it's not perfect.

background color is spreading from top and bottom, tried a lot but can't figure it out.
Here is my code:

.sectionTitle {
    font-size: 58px;
    font-size: 3.0526315789rem;
    line-height: 56px;
    line-height: .9655172414;
    font-weight: bold;
    color: #233e57;
    text-align: center;
}
.sectionTitle span {
    background-color: #ffe2b3;
    display: inline;
}

<h1 class="sectionTitle"><span>What students are Saying?</span></h1>

请帮我解决这个问题.

推荐答案

不需要图像，只需简单的渐变即可完成，您将可以更好地控制颜色，大小和所有内容

No need images, a simple gradient can do it and you will have better control over the color, size and everything

.sectionTitle {
    font-size: 58px;
    font-size: 3.0526315789rem;
    line-height: 56px;
    line-height: .9655172414;
    font-weight: bold;
    color: #233e57;
    text-align: center;
}
.sectionTitle span {
    background: 
      linear-gradient(#ffe2b3,#ffe2b3) 
      center/
      100% 60%  /* adjust this to control the size*/
      no-repeat;
}

<h1 class="sectionTitle"><span>What students are Saying?</span></h1>

这篇关于分别在段落的行上显示背景色-CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！