当文本在透明格下传递时更改颜色

Question

我有一页上有一些文字。最重要的是，我有一个比文本区域小的透明div。是否可以动态更改透明div下滚动文本的颜色？把透明的div想象成一张带有文字的纸片上的有色玻璃......这就是我要找的效果。 事情是这样的：

Partially highlighted text

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>

Answer 2

这是可能的，如果你想全面浏览器支持，你可以复制的元素，其定位绝对，并告诉它隐藏溢出的内容。像这样：

$.fn.glassify = function(options) { 
 
    
 
    
 
    var $glass = $("<div class='glass'>").insertAfter(this); 
 
    var $wrapper = $("<div class='wrapper'>").appendTo($glass); 
 
    
 
    // Clone the paragraph: 
 
    $(this).clone().appendTo($wrapper); 
 
    
 
    var pos = $.extend({ 
 
    top: 0, 
 
    right: 0, 
 
    bottom: 0, 
 
    left: 0 
 
    }, options); 
 
    
 
    
 
    $glass.css('top', pos.top); 
 
    $glass.css('right', pos.right); 
 
    $glass.css('bottom', pos.bottom); 
 
    $glass.css('left', pos.left); 
 
    
 
    $wrapper.css('top', -pos.top); 
 
    $wrapper.css('right', -pos.right); 
 
    $wrapper.css('bottom', -pos.bottom); 
 
    $wrapper.css('left', -pos.left); 
 
}; 
 

 
$("p").glassify({ 
 
    
 
    top: 50, 
 
    right: 100, 
 
    bottom: 20, 
 
    left: 200 
 
});

.container { 
 
    position: relative; 
 
} 
 

 
.glass { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: white; 
 
    outline: 1px solid red; 
 
    color: blue; 
 
    overflow: hidden; 
 
} 
 

 
.wrapper { 
 
    position: absolute; 
 
} 
 

 
p { 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis auctor ex. Maecenas ut nisl justo. Etiam vitae velit vitae libero congue aliquet at non ipsum. Donec pulvinar risus at pellentesque rhoncus. Vestibulum vitae nibh sit amet sem facilisis pellentesque. Phasellus condimentum pellentesque neque, at tincidunt lacus mollis tincidunt. Mauris vestibulum leo et libero lobortis pharetra. Aliquam sagittis felis molestie sapien rhoncus dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc posuere in orci sit amet ullamcorper. Fusce tempor sem eget aliquam efficitur. Suspendisse sagittis facilisis eros eget semper. Curabitur feugiat, quam eu aliquam vulputate, tellus odio scelerisque neque, a sodales est ligula in magna. Nullam vehicula eleifend dolor eget venenatis. Fusce tempus elit sit amet rutrum mattis. 
 
    </p> 
 
</div>

Answer 3

便宜的方法是使用HSLA或者RGBA并调整透明度..

background-color: hsla(48, 100%, 50%, 0.5); 

但当然，文本颜色只是它是一个融合设置为和上面的容器颜色是什么。

你似乎正在寻找完全透明的基础文字颜色变化，但这可能会帮助其他人。

The Fiddle