我怎样才能创建这样的文本背景

Question

我在this site上看到了这种文字背景样式 我想知道是否可以用css做到这一点。

Answer 1

您可以通过不同方式实现此效果。从使用pseudo元素到SVG。请参阅我使用:before，css-background和SVG的代码段。您可以尝试其他方法。

我推荐svg方法

＆＃13;

＆＃13;

svg{
  position: absolute;
  top: 0;
  z-index: -1;
}
h2{
  color: #333;
  font-size: 44px;
  padding: 5px 15px;
  position: relative;
  display: inline-block;
}
h2:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
h2.shape-1:before{
  background: #e7a9a8;
  border-radius: 10px;
  -webkit-transform: skewX(-15deg);
  transform: skewX(-15deg);
  opacity: 0.65;
}
h2.shape-2:before{
  background-size: cover!important;
  bacground-repeat: no-repeat!important;
  background: url('data:image/png;base64,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');
}

＆＃13;

<!-- using psedo elements -->
<h2 class="shape-1">Public art</h2>

<!-- using css background -->
<h2 class="shape-2">Lorem Ipsum</h2>

<!-- using svg -->
<h2 class="shape-3">Lorem Ipsum
  <svg version="1.1" id="architecture-bg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 374 80" style="enable-background:new 0 0 374 80;" xml:space="preserve">
<g style="fill: rgb(227, 203, 160);">
	<path class="architecture-bg-fill" d="M23.4,76c-4.3,0-7.8-3.4-7.9-7.7c-0.1-2,0.6-3.8,1.8-5.3l-4.7,0h-0.1c-4.3,0-7.8-3.4-7.9-7.7
		c-0.1-4.2,3.1-7.8,7.3-8.1c-1.4-1.4-2.2-3.3-2.3-5.4c0-0.6,0-1.2,0.2-1.7C6,39.7,3.1,36.5,3,32.6c-0.1-4.3,3.3-8,7.7-8.1l2.9-0.1
		c-0.2-0.7-0.4-1.5-0.4-2.3c0-1.2,0.2-2.3,0.6-3.3h-0.2c-4.4,0-7.9-3.5-7.9-7.9s3.5-7.9,7.9-7.9h348.6c4.3,0,7.8,3.4,7.9,7.7
		c0.1,4.3-3.3,7.9-7.6,8l-2,0.1c1.6,1.6,2.4,3.9,2.1,6.3c-0.3,2.9-2.1,5.2-4.6,6.4l4,0h0.1c4.3,0,7.8,3.4,7.9,7.7
		c0.1,4.3-3.2,7.9-7.5,8.1l-3.4,0.2c1.4,1.4,2.2,3.2,2.3,5.3c0.1,2.4-0.9,4.6-2.6,6.1c4.2,0.2,7.5,3.6,7.6,7.8
		c0,4.4-3.5,7.9-7.9,7.9L23.4,76L23.4,76z" style="fill: rgb(227, 203, 160);"></path>
</g>
</svg>
</h2>

＆＃13;

＆＃13;

＆＃13;