Hinzufügen von Link auf einem transparenten div mit Hintergrundbild

Question

Ich habe ein Div mit einer Transparenz auf, und ich muss einen Link oben auf der Transparenz, aber weder die Farbe oder der Link scheint zu arbeiten, habe ich versucht verschiedene Dinge wie das Setzen des Links in ein div, oder sogar das Bild sympathisch zu machen und nur den Text oben hinzuzufügen, aber ich kann es nicht funktionieren lassen. irgendwelche Ideen?

.skewed { 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    color: white; 
 
    -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); 
 
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); 
 
    width: 100%; 
 
    max-width: 400px; 
 
    min-width: 300px; 
 
    height: 350px; 
 
    min-height: 300px; 
 
    float: left; 
 
    margin-top: 5%; 
 
} 
 

 

 
.skewed:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: inherit; 
 
    height: inherit; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.5); 
 
} 
 

 
.skewed a { 
 
    padding: 50%; 
 
    color: white; 
 
    font-size: 5em; 
 
}

<div class="row"> 
 
      <div class="col-sm-4 skewed" style="background-image: url(https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg);"> 
 
      <a href="" class="link">link</a> 
 
      </div> 
 
      
 
</div>

Answer 1

Es ist ein z-index Thema. Das Pseudoelement befindet sich oben auf der Verknüpfung, so dass die Verknüpfung nicht anklickbar ist. In z-index: -1 zu .skewed:after

.skewed { 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    color: white; 
 
    -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); 
 
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); 
 
    width: 100%; 
 
    max-width: 400px; 
 
    min-width: 300px; 
 
    height: 350px; 
 
    min-height: 300px; 
 
    float: left; 
 
    margin-top: 5%; 
 
} 
 

 

 
.skewed:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: inherit; 
 
    height: inherit; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    z-index: -1; 
 
} 
 

 
.skewed a { 
 
    padding: 50%; 
 
    color: white; 
 
    font-size: 5em; 
 
}

<div class="row"> 
 
      <div class="col-sm-4 skewed" style="background-image: url(https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg);"> 
 
      <a href="" class="link">link</a> 
 
      </div> 
 
      
 
</div>

Answer 2

Ich glaube, ich war ein wenig spät, um meine Antwort zu bekommen geschrieben, aber meine Lösung ist etwas anders, so ist hier eine alternative Lösung. Ja, Ihr Problem bezieht sich auf den Z-Index. Meiner Meinung nach ist dein div unnötig, also habe ich seine Eigenschaften unter dem Anker-Tag entfernt. Ich fügte auch eine Zeilenhöhe von 350 px hinzu, um den Text zu zentrieren. Offensichtlich ist das nur effektiv, wenn Ihr Text in einer einzelnen Zeile enthalten ist. Sie können diese Eigenschaft also entfernen, wenn Sie sie nicht hilfreich finden.

a{ 
    font-size: 5em; 
    text-align: center; 
    line-height: 350px; 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-image: url(https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg); 
    background-color: black; 
    color: white; 
    -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); 
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); 
    width: 100%; 
    max-width: 400px; 
    min-width: 300px; 
    height: 350px; 
    min-height: 300px; 
    float: left; 
    margin-top: 5%; 
} 
a:after { 
    content: ''; 
    position: absolute; 
    width: inherit; 
    height: inherit; 
    top: 0; 
    left: 0; 
    background-color: rgba(0, 0, 0, 0.5); 
    z-index: -1; 
} 

Hier ist der HTML:

<div class="row"> 
    <a href="" class="link">link</a>    
</div>