Question

如果您不熟悉TwentyTwenty插件，它是一个视觉差异工具，可让您突出显示两个图像之间的差异。

我在wordpress上使用他们的插件，因为我需要在两个图像之间滑动的功能。但是，当您将鼠标悬停在默认情况下之前和之后的图像上时。

基本上我想要做的是更改标签前后标签，以便他们可以说出其他内容。怎么会这样做？

Answer 1

要维护twentytwenty.css，请更改您的html，为每个div容器提供唯一的ID：

<div id="set_1" class="twentytwenty-container">    
    <img src="img/1_1.jpg" />
    <img src="img/1_2.jpg" />
</div>

...并提供css为set_1提供唯一的文字：

#set_1 .twentytwenty-before-label:before {
    content: "new before" }
#set_1 .twentytwenty-after-label:before {
    content: "new after" }

这使您可以在需要时保持之前的原始和之后的，并在实现多个图像比较时提供唯一标注。

Answer 2

您可以通过修改文件twentytwenty.css中的以下行来更改这些参数：

.twentytwenty-before-label {
  opacity: 0; }
  .twentytwenty-before-label:before {
    content: "**Before**"; }

.twentytwenty-after-label {
  opacity: 0; }
  .twentytwenty-after-label:before {
    content: "**After**"; }

这部分css出现在第102行

Answer 3

通过插件选项设置标签

如何更改Twenty Twenty插件中的前后标签？

3 个答案: