javascript - 当文本在透明 div 下通过时更改颜色

Question

<分区>

Answer 1

有一个解决方案，但不是 widely supported by all browsers .您可以使用 CSS 属性 mix-blend-mode 来实现这一点。有可用的混合模式列表，请参阅 Mozilla Developer Network article关于混合混合模式。

.box {
  position: relative;
  width: 400px;
  height: 150px;
  overflow-y: scroll;
  color: black;
}

.overlay {
  position: fixed;
  width: 80px;
  height: 80px;
  top: 50px;
  left: 100px;
  border: 2px solid red;
  background-color: blue;
  mix-blend-mode: screen;
}

<div class="box">
  <div class="overlay">
  </div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi excepturi explicabo, animi et voluptatibus molestiae earum tempora ad perspiciatis accusantium impedit voluptates. Veritatis ex, officia velit maiores provident quasi dolorem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, commodi. Repellat dolore id repudiandae, harum quae perferendis, illum eum perspiciatis, cupiditate autem sapiente consectetur obcaecati et incidunt! Enim voluptas repellat reprehenderit voluptates perspiciatis quam repellendus reiciendis neque sed culpa deleniti, labore rerum non esse aut architecto earum illum sit accusamus ratione inventore dicta debitis, voluptatem ipsam iure. Quas, quae recusandae! Assumenda, nihil vero iusto iure. Dolores numquam libero odio assumenda nulla repudiandae quibusdam optio, aspernatur eligendi, ex, aliquid accusantium recusandae, asperiores laboriosam nemo. Obcaecati explicabo distinctio, mollitia fuga non ducimus harum facere, eos nisi sapiente eligendi, in quis sint laudantium ullam iusto id officia consequatur. Fugit aliquam expedita facilis harum libero id quaerat placeat nobis? Officiis fugit eos sint vero repellendus cum maxime aperiam, officia illo at tempore adipisci nulla quo consequuntur et nesciunt repudiandae consequatur enim, rem modi quaerat totam. Officia nihil velit totam placeat tempora, voluptates necessitatibus suscipit eligendi praesentium cupiditate enim magnam blanditiis aut? Reiciendis quaerat fugit expedita aperiam, veritatis provident error, quasi eos dignissimos dicta est, quidem, sequi. Corporis tempore odit modi, repellendus, adipisci mollitia est rerum. Harum inventore ab praesentium optio ea quis molestiae tempore quidem aut dolores alias, officia, autem voluptates eaque illo dolorem, laboriosam nobis eos. Quam odit, atque voluptate unde molestiae pariatur a nostrum consequuntur alias veniam soluta nihil officiis libero cum impedit dignissimos vero similique ratione cupiditate et quibusdam omnis esse nulla, facilis! Magnam dolorem molestias cumque fugiat, voluptatum atque possimus perferendis inventore dolore, nihil, asperiores eligendi ab est, illo placeat dolor aliquid ex quod. Culpa porro, minus id neque asperiores cum corrupti esse, est, excepturi ratione, in ut repudiandae. Blanditiis nisi nobis voluptatum omnis doloribus illum totam, aliquam asperiores optio repudiandae provident mollitia aspernatur, sunt perspiciatis rem expedita ad maxime illo, quaerat a impedit. Voluptas quia ipsum odit sint placeat itaque totam dolorem eaque aliquam numquam, consequatur nulla fuga ipsam suscipit voluptate pariatur incidunt minus blanditiis, magni ullam nisi id a. Quisquam neque minus officia reiciendis vel vitae tempore hic labore dicta mollitia, quis rem suscipit consequatur porro corrupti ullam atque reprehenderit odio obcaecati quo, placeat dolore nemo nostrum soluta eius! Consequatur neque voluptates reprehenderit, deserunt commodi aperiam mollitia veniam quisquam deleniti fugiat. Ea omnis accusamus rerum veniam vero laudantium saepe impedit pariatur voluptas esse illum labore est quia sint, vel culpa, soluta ex? Dicta molestiae fugiat, eveniet, sit excepturi sequi accusamus debitis maiores quaerat reprehenderit similique vero enim, nesciunt!
</div>