html - 使用 CSS 更改网格中单个元素的叠加颜色

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>

尊敬的社区成员，

我在编码方面经验不足，我需要您的帮助。

我的网站上有一个作品集(我正在使用这个 Media Grid – WordPress 响应式作品集 和 Media Grid Overlay 管理器附加组件)。 Overlay Manager 插件只允许对整个单个网格进行一个叠加设计(每个单个元素的唯一可管理功能是摘录)。我想为一个网格(例如纽约市)中的元素设置不同的叠加颜色。开发人员说这是可能的，但他没有进行这样的定制(特别是他写道“但是已经可行，但你需要知道 CSS 以及如何检查代码。每个网格项都有一个基于其的唯一选择器ID，那么实现它并不是特别困难”)。我可以定义这些 ID(对于 NYC Gallery 的示例 #56c46f838595)和覆盖层的选择器(类)——在我的例子中，背景颜色不断变化的层有一个类 .mgom_18_0.我一直在尝试为一个元素更改颜色，但没有成功。我在下面添加的所有详细信息。

在此问题上，我将不胜感激!提前谢谢你!

最好的问候，迈克

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

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

我用于测试城市网格的覆盖类型的 CSS 部分。 这是插件的元素图例。 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，但它也会有所帮助。