css - 在 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

您需要更改 .square-box 的 z-index 和 alpha(不透明度)

OP 发布示例网址后，我使用以下 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;
}