Question

我想突出显示页面上的某个区域，该页面由文本和图像组成。

我不想阻止用户选择文字，但我确实希望在文字顶部有一个半透明的黄色矩形。

如何在不阻止用户选择或与突出显示div下面的任何内容进行互动的情况下执行此操作？

实施例

<h1>test</h2>
<h1>line two</h1>
<h3>Why can't I select "test"? by itself</h3>
<span style="position:absolute;left:0px;top:0px;width:150px;height:150px;background-color:yellow;opacity:0.1;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>

Fiddle

Answer 1

将pointer-events: none;添加到范围。

＆＃13;

<h1>test</h2><h1>line two</h1><h3>Why can't I select "test"? by itself</h3>
<span style="position:absolute;left:0px;top:0px;width:150px;height:150px;background-color:yellow;opacity:0.1;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;pointer-events: none;"></span>

＆＃13;

Answer 2

将以下样式添加到您的范围：

pointer-events: none;

它将允许鼠标通过＆＃34;跨度

＆＃13;

<h1>test<br />line two</h1>
<h2>Why can't I select "test"? by itself</h2>
<span style="position:absolute;left:0px;top:0px;display:block;width:150px;height:150px;background-color:yellow;opacity:0.5;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;pointer-events:none;"></span>

＆＃13;

请注意，您在关闭h2代码时出错，如果您希望h1超过2行，请使用br代替关闭并重新打开

More information about pointer-events

如果你只是想要一个不透明的背景颜色而不使前景不透明，你可以使用和rgba颜色：

＆＃13;

/*for example only*/
body {
  background: url(http://lorempixel.com/800/800/city/1/);
  background-size:cover;
}

＆＃13;

<div style="background-color:rgba(255,255,0,0.5)">
  <h1>test<br/>line two</h1>
  <h3>Why can't I select "test"? by itself</h3>
</div>

＆＃13;

More information on rgba colors

Answer 3

这将有效

你必须添加位置：相对; z-index：9999;到你的h1标签

<h1 style="position: relative; z-index: 9999;">test</h1><h1 style="position: relative; z-index: 9999;">line two</h1><h3 style="position: relative; z-index: 9999;">Why can't I select "test"? by itself</h3>
<span style="position:absolute;left:0px;top:0px;width:150px;height:150px;background-color:yellow;opacity:0.1;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>

Answer 4

您可以通过两种方式制作：

将pointer-events: none;设置为span标记
为文字标签/元素设置position: relative;opacity:0.5; z-index: 1; jsfiddle

Answer 5

尽管pointer-events: none;应该为您提供技巧，但另一种（非常新的）创建叠加效果的强大方法是blend-mode属性。

https://dev.opera.com/articles/getting-to-know-css-blend-modes/

以下是一个例子：

http://codepen.io/anon/pen/meLgjL

优于您的解决方案的一个优点是您不需要额外的元素来设置内容样式。

http://caniuse.com/#search=blend-mode（IE或Edge尚未支持）

HTML / CSS：将带有背景颜色的div放在文本上，文本仍然可以选择

5 个答案: