Question

我有一个组件可以创建一些在其中有一个洞的形状，组件有一个坚实的背景，我希望洞在它下面显示背景图像（所以它看起来像一个真正的洞）。

降价会是这样的：

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

可以吗？它有一些解决方法吗？

编辑

根据要求，您可以找到组件here

标签背景扎实，上面的洞应显示下面的背景。

您也可以找到my repo中的代码：body styles，dogtag styles，home markup和dogtag markup。

Answer 1

我不确定我明白你的意思但是有一个不透明的特征：0.8;该值介于0.0到1.0之间

Answer 2

我看起来仍然不知道你想要完成什么。，你可以添加现场演示，以便更清楚......

但是如果你想使用透明背景，也许你可以在样式表中使用它：

.hole{
    background-color:rgba(0,0,0,0);
}

Answer 3

试试这段代码

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

Answer 4

不可能那样做。因为你的html页面剂量低于它...但你可以像这样做HTML页面。

   <div="hole">

CSS - 在div上方显示背景图片

4 个答案: