Question

我的左侧有一个带透明口音的标题栏。还有纯色背景色。我需要它以响应并接受任何长度的标题。 IDK为什么会这么痛苦，但我已经尝试了一切。

我尝试过将静态图像作为背景，但当标题为两行高时，没有骰子。

如果它是一个坚固的图标，那就很容易：只需放入图像并添加背景颜色即可。因为没有＆＃34;透明图像＆＃34;我胜过背景颜色，我迷失了。

这是最终产品需要的样子：

mockup

关于如何将透明度与纯色背景相结合并且没有所述背景填充透明度的任何想法？

更新：我目前的代码不是很好，但现在是。它适用于大多数宽度，但是当它变窄时就是一场灾难。我会尝试你的建议，让你知道事情是如何运作的。感谢大家!!!

HTML

＆＃13;

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

＆＃13;

<div class="titlebox-wrap">
  <div class="titlebox-hook"></div>
  <span class="titlebox-text">THIS STUPID THING NEEDS TO DICTATE LENGTH</span>
</div>

＆＃13;

Answer 1

创建一个仅与透明切口部分一样宽的背景图像，但非常高，透明形状上方和下方有大的纯色区域 - 您必须决定此设计元素合理需要多少行文本以适应确定要生成的图像的px高度
在伪元素上使用该bg图像
将伪元素放在使用负margin或transform: translateX()保存文本的元素之外，或者放在包装器的flexbox子元素的真实元素中

以下是使用flexbox（来自https://codepen.io/RwwL/pen/yPOade）的示例：

html, body {
  height: 100%;
}

body {
  padding: 5%;
  height: 100%;
  font-family: sans-serif;
  background: linear-gradient(to bottom, red, orange);
  background-size: cover;
  background-repeat: no-repeat;
}

.titlebox-wrap {
  width:90%;
  margin:0;
  padding:0;
  display: flex;
}
.titlebox-hook {
  width: 40px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAMgCAYAAADVw8ezAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAA6hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxNy0xMS0wM1QxNzoxMTo5MDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAzLjc8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHRpZmY6T3JpZW50YXRpb24+MTwvdGlmZjpPcmllbnRhdGlvbj4KICAgICAgICAgPHRpZmY6Q29tcHJlc3Npb24+NTwvdGlmZjpDb21wcmVzc2lvbj4KICAgICAgICAgPHRpZmY6UmVzb2x1dGlvblVuaXQ+MjwvdGlmZjpSZXNvbHV0aW9uVW5pdD4KICAgICAgICAgPHRpZmY6WVJlc29sdXRpb24+NzI8L3RpZmY6WVJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOlhSZXNvbHV0aW9uPjcyPC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTAwPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+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');
  background-repeat: no-repeat;
  background-position: left center;
}
.titlebox-text {
  background:#0d2240;
  flex: 1;
  color: #fff;
  padding :.7em 2em .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;
}

这是一个示例，说明如何设置图像，使用半圆形打孔而不是花哨的花形，但它的工作方式相同：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAMgCAYAAADVw8ezAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAA6hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxNy0xMS0wM1QxNzoxMTo5MDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAzLjc8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHRpZmY6T3JpZW50YXRpb24+MTwvdGlmZjpPcmllbnRhdGlvbj4KICAgICAgICAgPHRpZmY6Q29tcHJlc3Npb24+NTwvdGlmZjpDb21wcmVzc2lvbj4KICAgICAgICAgPHRpZmY6UmVzb2x1dGlvblVuaXQ+MjwvdGlmZjpSZXNvbHV0aW9uVW5pdD4KICAgICAgICAgPHRpZmY6WVJlc29sdXRpb24+NzI8L3RpZmY6WVJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOlhSZXNvbHV0aW9uPjcyPC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTAwPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+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

Answer 2

只是一个快速的想法（不保证它会起作用）：为什么不尝试将装饰品的反转作为svg（可以设计颜色）的蓝色，其余的不是太复杂？

Answer 3

最后用Flex完成了

HTML

<div class="fancy-title">
   <div class="fancy-cap"></div>
   <div class="fancy-text">content</div>
</div>

CSS

.fancy-title {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   flex-wrap:nowrap;
   }
.fancy-cap {
    background: url("images/blue.png") no-repeat 0 0;
    background-size:cover;
    background-position:center left;
    width:2.7em;
    }
.fancy-text {
    background:#0d2240;
    width:auto;
    }

Answer 4

img {
Background: 100%;
background: url();
}



img {
width: 100%;
display: block;
}

响应标题与透明图标和纯色背景颜色

4 个答案: