Question

我敢打赌这可能是愚蠢的，我试图在图像上放置一个绝对元素，但它没有出现。

<div class="circle" style="position: absolute; top: 200px; left: 100px;"></div>

                    <img src="images/madison-siteplan.png" class="siteplan" />

这是圈子的注意力css：

.circle {
            border-radius: 50%;
            width: 100px;
            height: 100px;
            color: red;
            }

Answer 1

它没有边框或轮廓，因此边缘不会出现。

它没有背景颜色，因此它是透明的。

里面没有内容，所以前景色没有实际效果。

更改上述任何一项。

Answer 2

@Quentin是对的，我只是读了他的答案，但由于我已经制作了一个片段，我在这里添加它。（我只在原始代码中添加了背景颜色，除了将内联CSS移动到外部CSS规则之外）：

＆＃13;

.circle {
  position: absolute;
  top: 200px;
  left: 100px;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  color: red;
  background: green;
}

＆＃13;

  <div class="circle"> </div>
  <img src="http://placehold.it/400x400" class="siteplan" />

＆＃13;

Answer 3

将绝对定位的元素移动到后图像。为该元素赋予一些视觉属性，以便您可以看到它...（边框，背景颜色，文本......）

＆＃13;

#bla {
  width:350px;
  height:350px;
  border-radius: 50%;
  background-color: rgba(255,0,0,0.5);
  position:absolute;
  top: 0;
  
}

＆＃13;

<img src="http://placehold.it/500">
<div id="bla"></div>

＆＃13;

CSS元素没有显示在图像上

3 个答案: