【发布时间】：2017-11-03 20:10:06
【问题描述】：
我在左端有一个带有透明重音的标题栏。还有纯色的背景色。我需要它响应并接受任何长度的标题。 IDK 为什么这很痛苦，但我什么都试过了。
我试过用静态图片作为背景，但是当标题高两行时，没有骰子。
如果它是一个实心图标，那就很简单了：只需放入图像并添加背景颜色即可。由于没有比背景颜色更重要的“透明图像”之类的东西，我迷路了。
这是最终产品的外观：
关于如何将透明度与纯色背景相结合并且没有说背景填充透明度的任何想法？
更新：我当前的代码不是很好，但在这里。它适用于大多数宽度，但当它变窄时会是一场灾难。我会尝试你的建议，让你知道事情的进展。谢谢大家！！！
HTML
.titlebox-wrap {
width:90%;
position:absolute;
top:-2em;
left:-3em;
margin:0;
padding:0;
}
.titlebox-hook {
background: url("images/blue-cap.png") no-repeat;
background-size:cover;
background-position:left center;
position:absolute;
top:0;
left:0;
width:10%;
height:100%;
z-index:-1;
}
.titlebox-text {
background:#0d2240;
margin:0;
margin-left:9.8%;
padding:.7em 1em .7em 0;
max-width:80%;
float:left;
-webkit-border-radius:.2em 3em 3em .2em;
-moz-border-radius:.2em 3em 3em .2em;
border-radius:.2em 3em 3em .2em;
}<div class="titlebox-wrap">
<div class="titlebox-hook"></div>
<span class="titlebox-text">THIS STUPID THING NEEDS TO DICTATE LENGTH</span>
</div>【问题讨论】：
-
发布您的代码，我们将从那里开始。
-
已更新。感谢您的关注。
标签： css