css - 如何同时应用动态CSS背景图片和静态背景图片(多背景)？

Question

我的元素的第一个背景图片是从 WordPress 中获取的，第二个是静态的。这是我当前的代码:

<h4 style="background-image: url(<?php the_field('icon'); ?>), url(images/arrow.svg);">content</h4>

url(images/arrow.svg) 非常难看，因为我们应该只在 CSS 文件中指定 CSS 元素。有没有办法以某种方式从我的模板文件中删除这一部分？

Answer 1

您可能想要做的是将两张图片分层，这样放置它们会容易得多。

父级上的相对定位为绝对定位的箭头提供了一个边界框。然后，您可以只使用顶部、左侧、右侧和底部，并将箭头放置在该边界框内的任意位置。

.relative {
  height: 184px;
  width: 544px;
  position: relative;
}
.static {
}
.arrow {
  position: absolute;
  width: 20px;
  top: 62px;
  left: 52px;
}

<div class="relative">
  <img class="static" src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
  <img class="arrow" src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Sideways_Arrow_Icon.png" />
</div>