所以我一直在使用克里斯的文章https://css-tricks.com/multi-line-padded-text/,以帮助我获得一些具有背景的中心文本。唯一的问题是我希望背景是半透明的,我想不出一种方法。我玩了线的高度和填充,但无法提出解决方案。
我想做的是停止每行重叠的背景,但要确保每行之间的空间相同。
<div class="ui-section__component">
<div class="comp--hero-text">
<h2>You're all clear, kid. Let's blow this thing and go home! You're all clear, kid. Let's blow this thing and go home!</h2>
</div>
</div>
$white: #fff;
$max-width: 1024px;
$small-spacing: 0.75em;
.ui-section__component{
background-color: green;
display: flex;
height: 500px;
width: 700px;
}
.comp--hero-text {
align-self: center;
margin: 0 auto;
max-width: $max-width - 200px;
text-align: center;
width: 80%;
h2 {
background-color: rgba($white, 0.85);
box-decoration-break: clone;
box-shadow: $small-spacing / 2 0 0 rgba($white, 0.85), -$small-spacing / 2 0 0 rgba($white, 0.85);
display: inline;
line-height: 1.5;
padding: 0.5em 0;
}
}
我的代码可以在代码笔上找到:http://codepen.io/rmaspero/pen/vmvwnx
我认为您可以通过消除背景颜色的alpha通道并将其更改为RGB相似颜色来解决此问题。是我最简单的解决方案。
h2 {
background-color: #f6f9f4;
box-decoration-break: clone;
box-shadow: $small-spacing / 2 0 0 rgba($white, 0.85), -$small-spacing / 2 0 0 #f6f9f4;
display: inline;
line-height: 1.5;
padding: 0.5em 0;
}
您可以减少'comp-hero-text H2'的线路高度
.comp-英文text H2 { 线高:2; }
,也可以调整填充物
.comp-英文text H2 { 填充:.2em 0; }
为.comp--hero-text h2
制作line-height: 1.2
,例如:
.comp--hero-text h2 {
line-height: 2.2;
}
请查看下面的片段:
.ui-section__component {
background-color: green;
display: flex;
height: 500px;
width: 700px;
}
.comp--hero-text {
align-self: center;
margin: 0 auto;
max-width: 824px;
text-align: center;
width: 80%;
}
.comp--hero-text h2 {
background-color: rgba(255, 255, 255, 0.85);
box-decoration-break: clone;
box-shadow: 0.375em 0 0 rgba(255, 255, 255, 0.85), -0.375em 0 0 rgba(255, 255, 255, 0.85);
display: inline;
line-height: 1.5;
padding: 0.15em 0;
}
<div class="ui-section__component">
<div class="comp--hero-text">
<h2>You're all clear, kid. Let's blow this thing and go home! You're all clear, kid. Let's blow this thing and go home!</h2>
</div>
</div>
希望这会有所帮助!