Question

我的主页上有一堆图像加载到网格中。其中两个图像直接从assets文件夹加载，而其他四个图像是根据它们是否被选为主页面项加载的。

以下是加载方式的代码：

    <div class="three_column_grid">
        <div class="col span_1_of_3">
            <%= image_tag("1stassetsimage.png") %>
            <%= image_tag("2ndassetsimage.jpg") %>
            <% @product = Product.all %>
            <% @product.each do |product| %>
                <% if product.display_on_home_page and !product.is_highlight_product and !(product == '..') %>
                    <%= link_to image_tag(product.product_image), products_content_url(product.id), :controller=>'products' %>
                <% end %>
            <% end %>
            <% @subcategory = Subcategory.all %>
            <% @subcategory.each do |subcategory| %>
                <% if subcategory.display_on_home_page and !subcategory.is_highlight_product and !(subcategory == '..') %>
                    <%= link_to image_tag(subcategory.image_attachment), subcategories_content_url(subcategory.id), :controller=>'subcategories' %>
                <% end %>
            <% end %>
        </div>
    </div>

至于CSS本身，这是我控制各种项目样式的方式：

           .three_column_grid{
                margin-top: 2%;
                width: 60%;
                position: relative;
                float: right;

                img {
                    display: inline-block;
                    width: 200px;
                    height: 200px;
                    -webkit-box-shadow: 1px 1px 1px 2px rgba(0, 0, 0, 0.3);
                    -moz-box-shadow: 1px 1px 1px 2px rgba(0, 0, 0, 0.3);
                    box-shadow: 1px 1px 1px 2px rgba(0, 0, 0, 0.3);
                    margin-left: 2%;
                    margin-right: 2%;
                    margin-bottom: 4%;

                    &:hover{
                        display: inline-block;
                        border: none !important;
                        -webkit-box-shadow: 2px 2px 2px 3px rgba(0, 0, 0, 0.3);
                        -moz-box-shadow: 2px 2px 2px 3px rgba(0, 0, 0, 0.3);
                        box-shadow: 2px 2px 2px 3px rgba(0, 0, 0, 0.3);
                    }
                }
            }

我尝试了一些事情;添加一个额外的div标签，只格式化资产图像抛出整个事物，并使用:not选择器得到相同的结果。我希望在1stassetsimage.png周围移除阴影，但我希望其他格式保持不变，因此它将正确地适合网格。

Answer 1

您可以在排除标记中添加一个类：

<%= image_tag("1stassetsimage.png", class: "plain" ) %>

然后“撤消”该元素的框阴影：

.three_column_grid {
  img.plain, img.plain:hover {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
}

从某些CSS格式中排除特定图像

1 个答案: