Question

我有一个非常奇怪的问题，这里是：我想创建一个像这个主题的透视阴影（在我的情况下改为:)，How to create a perspective shadow with CSS?

div {
 position: relative;
 display: inline-block;
 height: 150px;
 width: 150px;
 background: url(//placehold.it/150x150);
 margin-left: 30px;
}
div::before {
 content: "";
 position: absolute;
 z-index: -1;
 bottom: 0;
 left: 15px;
 height: 10%;
 width: 70%;
 box-shadow: -25px -4px 4px 0 rgba(0,0,0,0.75);
 transform: skewX(60deg);
}

然后当我加载我的网页然后我点击来自firefox的“检查元素”并点击代码中的某些内容时，我遇到了这个问题“解析属性时意外的NaN值”，我在论坛上搜索了人们说这可能是一个Qjery问题，但当我删除这个::一切都很好之后。这是我的Javascript文件：

function styleTabHover(tabButton){
    tabButton.style.color= "#ff9900";


}
function styleTabOut(tabButton){
    tabButton.style.color= "white";
    tabButton.style.borderColor= "white"; 
}
function check_email(ev){
    var champ = ev.currentTarget;
    if(!champ.value.includes("@")){
        champ.style.outline = "2px dotted red";
        document.getElementById("champ_requis").style.opacity = "1";
    }else{
        champ.style.outline = "none";
        document.getElementById("champ_requis").style.opacity = "0";
    }
}
function changeTab(idbouton){


    var tabs = document.getElementsByClassName("menu_bouton");
    console.log(tabs,"changetab fonction lancé")

    var i;

    for (i=0;i<tabs.length;i++){
        tabs[i].style.backgroundColor = "initial";
        tabs[i].style.zIndex = "0";
        tabs[i].onmouseover = function(){styleTabHover(this)};
        tabs[i].onmouseout = function(){styleTabOut(this)};

    }


    var bouton = document.getElementById(idbouton);

    bouton.style.background = "#ff9900";
    bouton.style.color = "white";
    bouton.onmouseover= function(){this.style.cursor = "default"};
}

var imgPositionMoins = 0;
function style_projet_slide(droite){

    var lst_projetImg = document.getElementsByClassName("projets_img");




    var i;
    if(droite && (imgPositionMoins > (-100*(lst_projetImg.length-1)) ) ){
        imgPositionMoins -= 100;
        for(i=0;i<lst_projetImg.length;i++){

            lst_projetImg[i].style.left = imgPositionMoins+"%";
        }

    }else if ( !droite && imgPositionMoins < 0){

        imgPositionMoins += 100;
        for(i=lst_projetImg.length-1; i>=0; i--){

            lst_projetImg[i].style.left = imgPositionMoins+"%";

        }
    }


}
function projet_desc(indice){
    var lst_desc=document.getElementById("projet_desc").children;
    var i;
    for (i=0;i<lst_desc.length;i++){
        if (i==indice){
            lst_desc[i].style.display = "block";
        } else{
            lst_desc[i].style.display = "none";
        }
    }
    window.scroll({ 
      top: 800,
      left: 0,
      behavior: 'smooth' 
    });

}

另一个问题我知道，当我在加载网页时使用z-index -1时，我会在1秒内看到:: before content，它应该是主要内容的后面。所以，我试图使用正面的z-index，因为人们说，但是当我在主要内容上放置更高的z-index时，它不起作用。我看到我必须把位置：相对但是在官方文件上。它表明我们可以做一个绝对的立场。有人能帮我吗？谢谢！

在内容+ z-index

0 个答案: