css - CSS : Is it possible to create a "punched-out" effect? 中的相对和绝对定位

Question

我有一个彩色背景和一个位于该背景之上的元素。通过使用 CSS 定位完成。

我的想法是让被 lorem ipsum-text 覆盖的区域基本上“消失”。这样背景橙色和 Jade 米丝就会出现。

有人会说:

绝对定位元素应该看起来像一些带有“打洞”字符的板。保留一些背景。

这可以用 CSS 实现吗？

更新

代码如下:

(function(selector, horizontalOffset, verticalOffset) {
  var items = document.querySelectorAll(selector);
  items = Array.prototype.slice.call(items);

  items.forEach(function(item) {
    // Every time the pointer moves over the element the 
    //  CSS-rule in overwritten with new values for 
    //  top and left.
    item.addEventListener('mousemove', function(e) {
      let countCssRules = document.styleSheets[0].cssRules.length;
      let newRule = selector +
        ':hover:after { display: block; ' + 
                       'left: ' + (e.offsetX + horizontalOffset) + 'px; ' +
                       'top: ' +  (e.offsetY + verticalOffset) + 'px; }';
      
      document.styleSheets[0].insertRule(newRule, countCssRules);
    });
  });
})('.tooltip-item', 10, 5);

.wrap {
  width: 1000px;
  margin: 50px auto;
  font-family: georgia, serif;
  background-color: cornsilk;
}

div.tooltip-item {
  background-color: orange;
  width: 450px;
  height: 100px;
  border: 1px solid black;
  border-radius: 8px;
  margin: 60px 10px;
}

.tooltip-item {
  position: relative;
}

.tooltip-item:after {
  content: attr(data-message);
  position: absolute;
  left: 105%;
  white-space: nowrap;
  display: none;
  font-size: 1.2rem;
  background-color: rgba(230, 230, 230, 0.6);
  padding: 10px 20px;
  border-radius: 16px;
  font-family: Tahoma, Verdana, Segoe, sans-serif;
  font-weight: normal;
}

div.tooltip-item:after {
  background-color: cyan;
  color: #ff14ec;
  font-weight: 800;
  border-radius: 20px;
  box-shadow: 6px 6px 9px #969696;
  text-transform: uppercase;
}

<div class="wrap">
  <div class="tooltip-item" data-message="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."></div>
</div>

我想要的是青色工具提示框后面的颜色(当前为紫色)。

我发现这些图片(最上面的第一张)显示了我的意思: http://flyingmeat.com/acorn/docs/creating_pressed_text.html

Answer 1

你可以使用这样的东西:

p {
   
   background: url("http://beerhold.it/579/300") no-repeat;
   -webkit-background-clip: text;
   background-clip: text;
   color:transparent;
   font-size:40px;
   font-weight:bold;
}

<p>
LOREM IPSUM I AM A TEST
</p>

但是 background-clip:text; 在 IE 中不支持。在这里查看更多 background-clip CSS