如何为同一元素添加叠加颜色和背景颜色

Question

我无法为此元素添加叠加层。我试过了:before，但它没有用。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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{
		  position: absolute;
		  content:"";
		  top:0;
		  left:0;
		  width:100%;
		  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>