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>

Answer 2

我能想到的唯一解决方案是：将静态的放在 div（或任何容器）上，并使其绝对放置在您想要的任何位置。

并动态地将另一个作为常规的单一背景。例如：

html

<div>
  <img src='./example.png' alt="example" />
</div>

css

div{
  position: relative;
  background: url('another-background.png');
  img{
    position: absolute;
    top: 5px;
    right: 5px;
  }
}

如何同时应用动态CSS背景图像和静态背景图像（多个背景）？

2 个答案: