Question

<div id="56c46f8385953" class="mg_box mg_pre_show col1_3 row1_3 m_col1_2 m_row1_3 mgi_14 mg_pag_1 mg_gallery mg_transitions mg_closed   " rel="pid_14"  mgi_w="0.333" mgi_h="0.333" mgi_mw="0.5" mgi_mh="0.333" >
  <div class="mg_shadow_div">
    <div class="img_wrap mg_has_txt_under" >
      <div>
        <img src="" class="thumb" alt="NYC" fullurl="//testseite24-7.de/wp-content/uploads/ewpt_cache/367x367_85_1_c_FFFFFF_40d34172585f94f3753e12e0e4b051fc.jpg" mobileurl="//testseite24-7.de/wp-content/uploads/ewpt_cache/400x267_85_1_c_FFFFFF_40d34172585f94f3753e12e0e4b051fc.jpg" />
        <noscript>
          <img src="//testseite24-7.de/wp-content/uploads/ewpt_cache/367x367_85_1_c_FFFFFF_40d34172585f94f3753e12e0e4b051fc.jpg" alt="NYC" />
        </noscript>
        <div class="overlays">
          <div class="mgom_layer mgom_full_img_layer mgom_18_0 ">
          </div
            ><div class="mgom_txt_wrap mgom_18_3 ">
          <div class="mgom_layer mgom_descr mgom_18_1">
          </div>
          <div class="mgom_layer mgom_txt_block mgom_18_2">
          </div>
          </div>
        </div>
        <a href="http://testseite24-7.de/#!mg_ld_14" class="mg_seo_dl_link">'</a>
      </div>
    </div>
  </div>
</div>

亲爱的社区成员，

我在编码方面没有经验，我需要你的帮助。

我的网站上有一个投资组合（我正在使用此媒体网格 - WordPress响应式投资组合和媒体网格叠加管理器插件）。叠加管理器附加组件仅允许整个单个网格的一个叠加设计（每个单个项目的唯一可管理功能是摘录）。我想为一个网格中的项目设置不同的叠加颜色（例如NYC）。开发人员说这是可能的，但他没有进行这样的定制（特别是他写了“但是已经可行，但你需要知道CSS以及如何检查代码。每个网格项都有一个独特的选择器基于它ID，然后实现它并不是特别困难“）。我可以定义这些ID（例如＃56c46f838595 用于NYC图库）和选择器（类）用于叠加 - 在我的情况下，具有不断变化的背景颜色的图层具有类 .mgom_18_0 。我一直试图改变一个项目的颜色，但没有成功。我在下面添加的所有细节。

在这个问题上，我将不胜感激！我提前谢谢你了！

最好的问候，迈克

更新。我添加了一个HTML部分。现在我有点困惑，因为每次我再次加载页面时ID都在变化......

我测试设置的网站http://testseite24-7.de/

我用于测试城市网格的叠加类型的CSS部分。这里是ELEMENT LEGEND for Plugin。Legend Classes Items

/* ***** 18 - test OVERLAY ***** */ 

    .mgom_18_0 { /* full_img_layer */
            top: 0px; left: 0px;
                background-color: #ffffff;opacity: 0; filter: alpha(opacity=0);                 
                transition: all 0ms ease 0s;
                -webkit-transition: all 0ms ease 0s; /* older webkit */
                -ms-transition: all 0ms ease 0s;                    
        z-index: 890; 
    }

    .mg_box:hover .mgom_18_0 {
            top: 0px; left: 0px;
                background-color: #ffb514;opacity: 0.8; filter: alpha(opacity=80);
                        }

    .mgom_18_1 { /* descr */
            text-align: left;
                font-size: 14px;                    
                color: #222222;line-height: 19px;                   
    }

    .mg_box:hover .mgom_18_1 {              
                color: #383838;
    }

    .mgom_18_2 { /* txt_block */
            top: 0px; left: 0px;
                background-color: #ffffff;opacity: 0; filter: alpha(opacity=0);                 
                transition: all 0ms ease 0s;
                -webkit-transition: all 0ms ease 0s; /* older webkit */
                -ms-transition: all 0ms ease 0s;                    
    }

    .mg_box:hover .mgom_18_2 {
            top: 0px; left: 0px;
                background-color: #ffffff;opacity: 0; filter: alpha(opacity=0);                 
    }

        .mg_box .mgom_18_3.mgom_txt_wrap > *:not(.mgom_txt_block) {
            opacity: 0;
            filter: alpha(opacity=0);   
        }

        .mg_box:hover .mgom_18_3.mgom_txt_wrap > *:not(.mgom_txt_block) {
            opacity: 1;
            filter: alpha(opacity=100); 
        }
        .mgom_18_3.mgom_txt_wrap > * {
            transition:         opacity 0ms ease 0s;
            -webkit-transition: opacity 0ms ease 0s;
            -ms-transition:     opacity 0ms ease 0s;
        }

.mgom_18_3.mgom_txt_wrap {
    top: 0px; left: 0px;            
                transition: all 0ms ease 0s;
                -webkit-transition: all 0ms ease 0s; /* older webkit */
                -ms-transition: all 0ms ease 0s;            

}

.mg_box:hover .mgom_18_3.mgom_txt_wrap {
    top: 0px; left: 0px;    
}

Answer 1

在html中找到一行代码

<div class="mgom_layer mgom_full_img_layer mgom_18_0">

并将其更改为：

<div class="mgom_layer mgom_full_img_layer mgom_18_0" style="background-color: red">

然后刷新页面。你会看到差异。最好的想法是使用id，但它也会有所帮助。

使用CSS

1 个答案: