Question

我试图弄清楚如何在浏览器调整大小时创建一个覆盖背景图像高度和宽度的叠加层。

我已经在SO上找到了一些非常好的答案，内联图像和响应高度不重要但没有任何响应背景图像的高度和宽度变化的情况。

与往常一样，JSFiddle中的示例可能会有所帮助。

HTML：

<?php foreach ($_additional[ 'items'] as $_data): ?>
     <?php $_attribute = $_product->getResource()->getAttribute($_data['code']); if (!is_null($_product->getData($_attribute->getAttributeCode())) && ((string)$_attribute->getFrontend()->getValue($_product) != '' && $_data['value'] != 'N/A')) { ?>
         <tr>
              <th class="label">
                  <?php echo $this->htmlEscape($this->__($_data['label'])) ?>
              </th>
              <td class="data">
                 <?php echo $_helper->productAttribute($_product, $_data['value'], $_data['code']) ?></td>
         </tr>
    <?php } ?>
<?php endforeach; ?>

CSS：

<ul class="two_boxes">
    <li class="sun">
        <div class="overlay"></div>
    </li>
    <li class="sun">
        <div class="overlay"></div> 
    </li>
</ul>

Answer 1

试试这个

http://jsfiddle.net/1nucgjdj/6/

<ul class="two_boxes">
    <li class="sun">

        <img src = "http://www.sideswipedesigns.com/test/sun_banner.jpg" width="100%" />
         <div class="overlay"></div>
    </li>

     <li class="sun">

               <img src = "http://www.sideswipedesigns.com/test/sun_banner.jpg" width="100%" />
         <div class="overlay"></div>
    </li> 
 </ul>



.two_boxes {
    margin: auto;
    width: 100%;
    max-width: 940px;
    height: 448px;
    padding-top: 0px;   
    position: relative;
}

.sun {
    background-repeat:no-repeat;
    width: 48%;
    min-height:auto;
    max-width: 458px; 
    max-height: 448px;
    display: inline-block;
    position:relative;
}

.overlay  {     
    background:rgba(0,0,0,.75);
    text-align:center;
    z-index: 100; 
    opacity:0;
    -webkit-transition: opacity .25s ease;
    -moz-transition: opacity .25s ease;
    position:absolute;
    top:auto;
    bottom:0;
    width:100%;
    height:100%;
}

.sun:hover .overlay {
    opacity:1;
}

响应覆盖背景图像（列表项）

1 个答案: