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

【问题标题】：CSS - Show background image above divCSS - 在 div 上方显示背景图片
【发布时间】：2016-05-08 08:25:57
【问题描述】：

我有一个组件，它创建了一个内部有一个孔的形状，该组件具有纯色背景，我希望该孔在其下方显示背景图像（因此它看起来像一个实际的孔）。

降价会是这样的：

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

【问题讨论】：

标签： html css styles background-image

【解决方案1】：

我不确定我是否理解你的意思但有一个特点 opacity:0.8;该值介于 0.0 到 1.0 之间

【讨论】：

但是为 .component 添加不透明度不会使它的背景变得坚实，对吧？我可以试试

【解决方案2】：

试试这个代码

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

【讨论】：

我想我可以为身体和孔放置相同的背景，并祈祷它们排成一行。刚刚尝试过，有点效果，但有时它不合适，两个图像都错位了。
对不起，我不明白..如果你想给我一些代码
刚刚为问题添加了代码、repo 和实际演示！

【解决方案3】：

我仍然不知道您要完成什么。您可以添加现场演示以更清楚...

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

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

【讨论】：

添加了演示和 repo 的链接以进行澄清，稍后将添加实际的 sn-ps（对不起，我在移动 rn）
.hole背景不能穿过.core下面的元素bacground ...，您可以制作另一个对象来填充灰色以形成您想要的形状而不接触.hole区域跨度>
或者你可以在身体 bcground 中为 .hole 滴下与天空颜色相同的颜色，并使用一点渐变来实现这个技巧......或者你可以使用 HTML 画布 createImageData() 方法来制作每个像素的图像（但我认为这很难）......而且为了简单的方法，你为什么不使用图像文件？说真的，你可以在一分钟内在 Photoshop 上创建形状......只是说:)。
哈哈哈，当然可以，但是我对 Photoshop 真的很差，在 Gimp 或 Illustrator 中我需要一些时间，实际上我对 CSS 感觉更舒服，而且想测试自己。

【解决方案4】：

不能那样做。因为你的 html 页面不理解它......但你可以像这样做 HTML 页面。

   <div="hole">

【讨论】：

嗯，是的，我没有写整个 HTML markdown，只是重要的部分哈哈哈