在CSS中的图像上放置一个框

Question

我正试图在中间和右侧面板上放置一个不透明的黑盒子，这样它们就会被有效地“变灰”。

我可以达到这个目的：

显然不太正确，因为颜色在面板后面，但我需要它在前面

我的代码是：

.packages_wrapper
  .packages.premium
    .dmnd
      = image_tag "premium.png"
      %h1
        PREMIUM
        %span.left_shape
        %span.right_shape
    %ul.package_list{style: 'margin-top: 45px;'}
      %li Create business listing
      %li Upload your logo
      %li Add multiple contact details
      %li Appear in searches for your region and category
      %li Write business description
    %p.price Free
    .package_after_login.premium
      = link_to 'Sign up now', new_owner_path(query: 'Premium')
  .square-box

    .packages.silver
      .dmnd
        = image_tag "silver.png"
        %h1 
          SILVER
          %span.left_shape
          %span.right_shape
      %p
        %span.small_premium_inline_icon
      %p.plusline{style: 'font-weight: bold; font-size: 18px;'}  +
      %ul.package_list{style:'color: #59595c;'}
        %li Respond to reviews
        %li Add social media links
        %li Upload images and video
        %li Create detailed listing
      %p.price £99 per year
      .package_after_login#silver
        = link_to 'Sign up now', new_owner_path(query: 'Silver')
    .packages.gold
      .dmnd
        = image_tag "golden.png"
        %h1 
          GOLD
          %span.left_shape
          %span.right_shape
      %p
        %span.small_premium_inline_icon
      %p.plusline.gold_column_plus{style: 'font-weight: bold; font-size: 18px;'} +

      %p
        %span.small_premium_inline_icon.silver_wrapper
      %p.plusline.gold_column_plus{style: 'font-weight: bold; font-size: 18px;'} +

      %ul.package_list
        %li No competitor banner ads on your business page
      %p.price £149 per year
      .package_after_login#gold
        = link_to 'Sign up now', new_owner_path(query: 'Golden')

我的css包括：

   .square-box{
    position: relative;
    width: 60%;
    overflow: hidden;
    background: #4679BD;
    height: 530px;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 20px;
    margin-right:50px;
    float:right;
}
    .square-box:before{
    content: "";
    padding-top: 100%;
}

有谁知道我怎么能在前面得到它？

由于

Answer 1

它需要比其他项目更高的（css）z-index

z-index:999

也许是一些不透明度：

  opacity:.3;

在您的示例中，您可以添加以下css以获得类似效果，而无需添加更多元素（它会使金色和银色选项变灰）：

.packages.silver, .packages.gold {
    opacity: 0.5;
}

Answer 2

您需要更改.square-box

的z-index和alpha（不透明度）

OP发布示例Url后，我已使用以下HTML和CSS更新了我的回答

<强> HTML

<div class="packages_wrapper">
<div class="packages premium">
<div class="dmnd">
<img alt="Premium" src="/assets/premium-cdfcd2e49eb7f0cccdfcce365f190a11.png">
<h1>
PREMIUM
<span class="left_shape"></span>
<span class="right_shape"></span>
</h1>
</div>
<ul class="package_list" style="margin-top: 45px;">
<li>Create business listing</li>
<li>Upload your logo</li>
<li>Add multiple contact details</li>
<li>Appear in searches for your region and category</li>
<li>Write business description</li>
</ul>
<p class="price">Free</p>
<div class="package_after_login premium">
<a href="/owners/new?query=Premium">Sign up now</a>
</div>
</div>
<div class="packages silver">
<div class="dmnd">
<img alt="Silver" src="/assets/silver-74195f85f4e27927f7f1e91625c5dac9.png">
<h1>
SILVER
<span class="left_shape"></span>
<span class="right_shape"></span>
</h1>
</div>
<p>
<span class="small_premium_inline_icon"></span>
</p>
<p class="plusline" style="font-weight: bold; font-size: 18px;">+</p>
<ul class="package_list" style="color: #59595c;">
<li>Respond to reviews</li>
<li>Add social media links</li>
<li>Upload images and video</li>
<li>Create detailed listing</li>
</ul>
<p class="price">£99 per year</p>
<div class="package_after_login" id="silver">
<a href="/owners/new?query=Silver">Sign up now</a>
</div>
</div>
<div class="packages gold">
<div class="dmnd">
<img alt="Golden" src="/assets/golden-646ae0d7f8be160135445ff17c6117be.png">
<h1>
GOLD
<span class="left_shape"></span>
<span class="right_shape"></span>
</h1>
</div>
<p>
<span class="small_premium_inline_icon"></span>
</p>
<p class="plusline gold_column_plus" style="font-weight: bold; font-size: 18px;">+</p>
<p>
<span class="small_premium_inline_icon silver_wrapper"></span>
</p>
<p class="plusline gold_column_plus" style="font-weight: bold; font-size: 18px;">+</p>
<ul class="package_list">
<li>No competitor banner ads on your business page</li>
</ul>
<p class="price">£149 per year</p>
<div class="package_after_login" id="gold">
<a href="/owners/new?query=Golden">Sign up now</a>
</div>
</div>
<div class="square-box"></div>
</div>

<强> CSS

.packages_wrapper {
  clear: both;
  height: 430px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  width: 100%;
  position: relative;
}
.square-box{
  position: absolute;
  width: 620px;
  height: 100%;
  background: rgba(0,0,0,0.3);
  right: 30px;
  bottom: -92px;
}