div上的透明边框与父div

Question

我正在寻找一种方法来做这样的事情：

首先，我虽然关于透明边框，但由于有父div（蓝色背景）而无法工作。

目标是将边框透明+子视图周围的父div设置为透明，这样我们就可以将背景图像看作边框。

有人能给我一些建议吗？ 谢谢！

Answer 1

你可以试试这个Css

div{width:300px;border:solid 1px red; background:blue;
padding-left:20px;}
ul {list-style-type:none;margin:0; padding:0;}
ul li{background:url('https://www.gravatar.com/avatar/76e03db06bb6dcf24f95bf4d354486db?s=64&d=identicon&r=PG') repeat 0 0;
margin:10px 0; padding:15px 10px; color:red; position:relative;z-index: 2;
}

ul li:after{
      content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    bottom: 5px;
    right: 0px;
    background: rgba(0,0,0,0.4);
    z-index: -1;
}

<div>
<ul>
  <li>Hello Hello </li>
      <li>Hello Hello </li>
  <li>Hello Hello </li>
      <li>Hello Hello </li>
  <li>Hello Hello </li>
  </ul>
</div>