我有一个组件，它创建了一些内部有孔的形状，该组件有一个坚实的背景，我希望孔显示其下方的背景图像（这样它看起来像一个实际的孔）。
降价是这样的：
<body>
<div class="component">
<div class="hole"></div>
</div>
</body>
样式：
body {
background-image: url(some-image.jpg);
background-size: cover;
}
.component {
background: black;
height: 200px;
width: 200px;
position: relative;
}
.component .hole {
background: transparent !important; // not sure
height: 20px;
width: 20px;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
能做到吗？有什么变通办法吗？
编辑
根据要求，您可以在此处找到组件
狗牌有一个坚实的背景，上面的洞应该显示下面的背景。
您也可以在我的repo中找到代码：body样式、dogtag样式、home标记和dogtag标记。
我不确定我是否理解你的意思但存在一个特征不透明度：0.8；该值在0.0到1.0之间
尝试此代码
<style>
#box {
height: 100px;
width: 100px;
background: url("photos/bamboo.jpg") no-repeat;
background-size: cover;
border: 10px solid red;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
我仍然不知道你想完成什么。，你可以添加现场演示只是为了更清楚。。。
但是如果您想使用透明背景，也许您可以在样式表中使用这个：
.hole{
background-color:rgba(0,0,0,0);
}
不能这样做。因为你的html页面没有被低估…但你可以这样做html页面。
<div="hole">