圖片庫z-index問題

我想修改http://tympanus.net/Development/ScatteredPolaroidsGallery/的z-index。我提到的演示是在第三個/最後一個例子中。圖片庫z-index問題

當寶麗來翻轉時，我無法選擇鉻或Safari中的文本，但我可以在Firefox中。

Chrome和Firefox

我只是需要一種方法能夠選擇在Chrome/Safari中的文本。這樣，我就可以添加超鏈接並調用當前隱藏在z-index後面的操作按鈕。

div的問題是 'photostack回'

HTML

<section id="photostack-1" class="photostack photostack-start"> 
<div> 
    <!-- Polaroid with backside --> 
    <figure> 
     <a href="http://goo.gl/fhwlSP" class="photostack-img"> 
      <img src="img/2.jpg" alt="img02"/> 
     </a> 
     <figcaption> 
      <h2 class="photostack-title">Happy Days</h2> 
      <!-- optional backside --> 
      <div class="photostack-back"> 
       <p>Fish don't fry in the kitchen and beans don't burn on the grill. Took a whole lotta tryin' just to get up that hill. Baby if you've ever wondered - wondered whatever became of me. </p> 
      </div> 
     </figcaption> 
    </figure> 
    </div> 
</section

CSS

.photostack-back { 
display: none; 
position: absolute; 
width: 100%; 
height: 100%; 
top: 0; 
left: 0; 
background: #fff; 
font-family: "Give You Glory", cursive; 
color: #a7a0a2; 
padding: 50px 40px; 
text-align: left; 
font-size: 22px; 
line-height: 1.25; 
z-index: 1; 
}

這裏是Scattered Polaroids Gallery

來源

2015-10-28 Mills

怎麼樣張貼CSS呢？ – Hoshts

感謝@Hoshts，我已更新我的代碼 – Mills

我可以看到問題。移動Safari瀏覽器在選擇文本時遇到了同樣的問題。我目前正在使用移動設備，因此無法查看它。當我再次進入電腦時會再次檢查。 – Hoshts

我想通了，這不是教程一個Z-索引問題，但背面可見性問題。

我以前veinjs注入在photostack.js

vein.inject('figure', {'backface-visibility' : 'visible !important'});

下面的代碼和CSS

figcaption { 
backface-visibility: hidden; 
}

來源

2015-11-02 16:17:25 Mills

圖片庫z-index問題

回答

相關問題