WordPress的Z-指数问题

2016-12-03 52 views 0 likes

我在wordpress主题，但不工作的一页尝试这样。这里是这样的情况：当我解开z-index带阴影的旋转盒条来到该区域的正面时，但是当我将它重新打开时，阴影消失并且旋转的条纹消失。这个效果背后的场景是在显示阴影的同时隐藏背景区域后面的旋转条。任何解决这个请吗？下面是代码：

HTML

<div class="box effect1"> 
<h3>Effect 1</h3>

CSS

 .box h3 
     { 
     text-align:center; 
     position:relative; 
     top:80px; 
     } 

    .box 
     { 
     width:70%; 
     height:200px; 
     background:#FFF; 
     margin:40px auto; 
     } 

    .effect2 
     { 
     position: relative; 
     } 

    .effect2:before, .effect2:after 
     { 
     z-index: -1; 
     position: absolute; 
     content: ""; 
     bottom: 15px; 
     left: 10px; 
     width: 50%; 
     top: 80%; 
     max-width:300px; 
     background: #777; 
     box-shadow: 0 15px 10px #777; 
     transform: rotate(-3deg); 
     } 

    .effect2:after 
     { 
     transform: rotate(3deg); 
     right: 10px; 
     left: auto; 
     }

来源

2016-12-03 Dwayne Johnson

回答

你的CSS是指 “EFFECT2” 但你的DIV有一类“EFFECT1的“

当我将DIV更改为“效果2”时，我看到了您想要的样式。

来源

2016-12-04 01:01:38 webguy

对不起，这是一个错误在这里。我已经尝试了effect2。但阴影并没有出现在那里:( –

显示在这里... https://jsfiddle.net/hssgqrd5/你可能有其他的CSS设置在页面上，影响效果。 – webguy

WordPress的Z-指数问题

回答

相关问题