如何使用 jQuery 将第二个背景插入到基于 class 的内联样式中？

Question

我搜索过这个问题，但没有找到，如有任何帮助，我们将不胜感激。

我有一个 header div 有一个动态调用的背景图像，所以背景图像是使用样式属性内联调用的。我需要在它上面有第二个背景，顶层是 css 渐变，所以我需要使用 CSS 多个背景。但我有两种渐变颜色选择，黑色渐变或白色渐变，具体取决于照片主要是浅色还是深色。因此，当管理员设置页面时，他们会上传照片，然后决定是否需要在顶部使用浅色或深色渐变。这是由 ACF 字段完成的。他们决定了这一点，代码中添加了 class，'light' 或 'dark'.

这是我的代码：

<section id="header-block" style="background-image: url(<?php echo $feat_image[0]; ?>);" class="<?php if( get_field('header_theme') == 'dark' ): ?>dark<?php elseif( get_field('header_theme') == 'light' ): ?>light<?php endif; ?>">

所以我需要根据 class 是 'light' 还是 'dark'.

所以插入：

linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 70%),

如果 class 是 'dark' 或：

linear-gradient(to right, rgba(0,0,0,.8) 0%, rgba(0,0,0,.4) 50%, rgba(255,255,255,0) 70%),

如果 class 是 'light'。

结果（一个示例）将是：

<section id="header-block" style="background-image: linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 70%), url('/path/to/image.jpg');" class="dark">

我该怎么做？

Answer 1

我会在该块上使用伪元素来制作叠加层。

#header-block {
  position: relative;
  /* you don't need this height/width, just for my demo */  
  width: 560px; height: 400px;
}

#header-block:after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}

#header-block.light:after {
  background-image: linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 70%);
}

#header-block.dark:after {
  background-image: linear-gradient(to right, rgba(0,0,0,.8) 0%, rgba(0,0,0,.4) 50%, rgba(255,255,255,0) 70%);
}

<section id="header-block" style="background-image: url(http://kenwheeler.github.io/slick/img/fonz1.png);" class="dark">
</section>

<section id="header-block" style="background-image: url(http://kenwheeler.github.io/slick/img/fonz1.png);" class="light">
</section>

Answer 2

您可以使用 Michael Coker 所说的伪代码，但要使用 jQuery 完成此操作，您可以使用：

$(".dark, .light").each(function() {
 $this = $(this);
  back = $this.css("backgroundImage");
  
  if ( $this.hasClass('dark') ) {
   lin = "linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 70%), "
  } else if ( $this.hasClass('light') ) {
   lin = "linear-gradient(to right, rgba(0,0,0,.8) 0%, rgba(0,0,0,.4) 50%, rgba(255,255,255,0) 70%), ";
  }
  
  $this.css("backgroundImage",  lin + back)
  
})

.light-bk {
  background-image: linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 70%);
  }

.dark-bk {
   background-image: linear-gradient(to right, rgba(0,0,0,.8) 0%, rgba(0,0,0,.4) 50%, rgba(255,255,255,0) 70%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section style="background-image: url('/path/to/image.jpg');" class="js-addBG dark">

（检查代码以查看结果）

JSfiddle

如何使用 jQuery 将第二个背景插入到基于 class 的内联样式中？

How do I use jQuery to insert a second background into an inline style based on a class?

css

jquery

background-image

linear-gradients