透明なdivに背景画像を追加する

Question

透明度を設定したdivがあり、透明度の上にリンクを置く必要がありますが、ソリッドカラーやリンクのどちらも機能していないようです。 div内にリンクを入れたり、イメージを好き嫌いをつけて上にテキストを追加したりするなど、さまざまなことができますが、動作させることはできません。 アイデア？

.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

それは、zインデックスの問題です。疑似要素はリンクの上に配置されるため、リンクはクリックできません。私は私の答えは掲載を取得するために少し遅れましたが、私の解決策が若干異なるので、ここで代替修正だと思うz-index: -1

.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>

.skewed:afterへ

Answer 2

を追加します。はい、問題はZ-インデックスに関連しています。私の意見では、あなたのdivは不要なので、アンカータグの下のプロパティを削除しました。また、テキストを中央に配置するために350pxという行の高さを追加しました。明らかに、テキストが1行に含まれている場合にのみ有効です。そのため、そのプロパティが役立たない場合は、そのプロパティを削除できます。

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; 
} 

は、ここにHTMLです：

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