与父DIV DIV透明边框

我正在寻找一种方法做这样的事情：与父DIV DIV透明边框

首先，我虽然对透明边框，但它不会工作，因为是父母div（蓝色背景）。

我们的目标是设置边框透明+儿童周围的父div透明，所以我们可以看到背景图片为边框。

任何人都可以给我一些建议吗？谢谢！

来源

2015-12-17 Sentynel

我认为你将不得不拆分蓝色股利和包装他们周围的菜单点。在这种情况下，您可以使用边距而不是边框。我不认为它有可能通过2层来制作透明的东西 – Aytee

是的，虽然我还谈到了其他的东西：用透明的案例制作蓝色背景，这些案例将包装列表按钮。无论如何感谢您的反馈 – Sentynel

你可以尝试这个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>

来源

2015-12-17 10:49:00

与父DIV DIV透明边框

回答

相关问题