2

I want to design an HTML element with a transparent hole.

Look at the following code:

HTML

<div class="outer">
  <div class="inner"></div>
</div>

CSS

body {
  background-color: gray;
}
.outer {
  width: 200px;
  height: 200px;
  background-color: blue;
  position: relative;
}
.inner {
  height: 20px;
  width: 20px;
  border-radius: 10px;
  position: absolute;
  left: 90px;
  top: 90px;
  background-color: yellow;
}

https://jsfiddle.net/gpc9aq68/

So, via "the hole" I want to see HTML body background.

In this case, this can be "emulated" by setting "hole" element color to gray. But what if a background is an image/video or just unknown?

web-tiki
  • 99,765
  • 32
  • 217
  • 249
humkins
  • 9,635
  • 11
  • 57
  • 75
  • Any reason you can't use an svg image as a background on `.outer`? I believe this is what people generally do with tasks like this. – Rob Erskine Dec 24 '15 at 15:03
  • I wanted to clarify whether it is doable with HTML+CSS or not because I need to place some unknown content inside the element, for example text of unknown size, and thus it would be much better if the container is extended automatically depending on its content size. Specifically, I'm thinking of this UI element http://xoo.me/template/details/12731-light-ui-tags-add-remove-widget-psd – humkins Dec 28 '15 at 15:54

0 Answers0