如何爲同一元素添加疊加顏色和背景顏色

Question

我無法將疊加添加到此元素。我試過:before但它不工作。

.bot-about li { 
 
    display: inline-block; 
 
    padding: 5px 15px; 
 
} 
 

 
.bot-about li img { 
 
    border-radius: 50%; 
 
    height: 50px; 
 
    width: 50px; 
 
    padding: 3px; 
 
    /*box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.1);*/ 
 
    margin: 10px 10px 0 10px; 
 
    -webkit-transition: box-shadow 0.3s ease; 
 
    -moz-transition: box-shadow 0.3s ease; 
 
    transition: box-shadow 0.3s ease; 
 
    position: relative; 
 
} 
 

 
.bot-about li img:hover { 
 
    box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.1); 
 
} 
 

 
.bot-header { 
 
    color: rgba(255, 85, 70, .8); 
 
    text-align: left; 
 
    margin-left: 10%; 
 
    font-size: 16px; 
 
} 
 

 
.bot-about { 
 
    position: relative; 
 
} 
 

 
.bot-img-text { 
 
    position: relative; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
.bot-about li { 
 
    position: relative; 
 
} 
 

 
.bot-about .item { 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
.bot-about img { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.bot-about .caption { 
 
    display: block; 
 
    margin-left: 2px; 
 
    margin-top: 10px; 
 
}

<div class="bot-container"> 
 
    <div class="bot-cards"> 
 
    <div class="bot-card"> 
 
     <div class="bot-about"> 
 
     <!-- Skills section --> 
 
     <div class="bot-header"> 
 
      Connections 
 
     </div> 
 
     <ul> 
 
      <li> 
 
      <div class="item"> 
 
       <a href="#"> 
 
       <img src="https://via.placeholder.com/50x50" class="c"> 
 
       </a> 
 
       <span class="caption">Concept</span> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div class="item"> 
 
       <a href="#"> 
 
       <img src="https://via.placeholder.com/50x50" class="e"> 
 
       </a> 
 
       <span class="caption">Exam</span> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div class="item"> 
 
       <a href="#"> 
 
       <img src="https://via.placeholder.com/50x50" class="f"> 
 
       </a> 
 
       <span class="caption">Formula</span> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div class="item"> 
 
       <a href="#"> 
 
       <img src="https://via.placeholder.com/50x50" class="t"> 
 
       </a> 
 
       <span class="caption">Test</span> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div class="item"> 
 
       <a href="#"> 
 
       <img src="https://via.placeholder.com/50x50" class="v"> 
 
       </a> 
 
       <span class="caption">Video</span> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div class="item"> 
 
       <a href="#"> 
 
       <img src="https://via.placeholder.com/50x50" class="q"> 
 
       </a> 
 
       <span class="caption">Quiz</span> 
 
      </div> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

希望這有助於。我已經添加的元素之後，僞到該項目

.bot-about li { 
 
    display: inline-block; 
 
    padding: 5px 15px; 
 
} 
 

 
.bot-about li img { 
 
    border-radius: 50%; 
 
    height: 50px; 
 
    width: 50px; 
 
    padding: 3px; 
 
    /*box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.1);*/ 
 
    margin: 10px 10px 0 10px; 
 
    -webkit-transition: box-shadow 0.3s ease; 
 
    -moz-transition: box-shadow 0.3s ease; 
 
    transition: box-shadow 0.3s ease; 
 
    position: relative; 
 
} 
 

 
.bot-about li img:hover { 
 
    box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.1); 
 
} 
 

 
.bot-header { 
 
    color: rgba(255, 85, 70, .8); 
 
    text-align: left; 
 
    margin-left: 10%; 
 
    font-size: 16px; 
 
} 
 

 
.bot-about { 
 
    position: relative; 
 
} 
 

 
.bot-img-text { 
 
    position: relative; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
.bot-about li { 
 
    position: relative; 
 
} 
 

 
.bot-about .item { 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
.bot-about .item:before{ 
 
\t \t position: absolute; 
 
\t \t content:""; 
 
\t \t top:0; 
 
\t \t left:0; 
 
\t \t width:100%; 
 
\t \t height:100%; 
 
     background-color:rgba(0,0,0,.5); 
 
} 
 

 
.bot-about img { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.bot-about .caption { 
 
    display: block; 
 
    margin-left: 2px; 
 
    margin-top: 10px; 
 
}

<div class="bot-container"> 
 
    <div class="bot-cards"> 
 
    <div class="bot-card"> 
 
     <div class="bot-about"> 
 
     <!-- Skills section --> 
 
     <div class="bot-header"> 
 
      Connections 
 
     </div> 
 
     <ul> 
 
      <li> 
 
      <div class="item"> 
 
       <a href="#"> 
 
       <img src="https://via.placeholder.com/50x50" class="c"> 
 
       </a> 
 
       <span class="caption">Concept</span> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div class="item"> 
 
       <a href="#"> 
 
       <img src="https://via.placeholder.com/50x50" class="e"> 
 
       </a> 
 
       <span class="caption">Exam</span> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div class="item"> 
 
       <a href="#"> 
 
       <img src="https://via.placeholder.com/50x50" class="f"> 
 
       </a> 
 
       <span class="caption">Formula</span> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div class="item"> 
 
       <a href="#"> 
 
       <img src="https://via.placeholder.com/50x50" class="t"> 
 
       </a> 
 
       <span class="caption">Test</span> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div class="item"> 
 
       <a href="#"> 
 
       <img src="https://via.placeholder.com/50x50" class="v"> 
 
       </a> 
 
       <span class="caption">Video</span> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div class="item"> 
 
       <a href="#"> 
 
       <img src="https://via.placeholder.com/50x50" class="q"> 
 
       </a> 
 
       <span class="caption">Quiz</span> 
 
      </div> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>