CSS技术分享：粗ps-reduced transparency：降低透明度媒体查询。

分享一下最近看到的一个ado发布的一个scr，降低透明度的新媒体查询功能，就这个preferred reduced transparency，它是一个支持CSS媒体查询，识别到在系统设置这个降低透明度的特性。

比如在系统里面设置降低透明度的时候可以看到如果不开启，默认是这个边栏，菜单栏是有一定透明度的可以很好的和背景融合在一起。如果是开启了就可以看到其实就是一个没有透明度，是打印的一个颜色，就是刚好和ui的主题色是对应的一个白色。

有这样一个需求，就是在一个DIV中包含有一个Image标签，但是在Div标签中包含有一张背景图片，设计图上的样子是这张背景图片是有一个透明度的，但是如果直接使用opacity属性设置的的话就会连Div中的内容的透明度也会受到影响，那么我们如何在HTML中设置div背景图片的透明度呢？，可以通过以下几种方法实现。

方法一：使用伪元素

如果在图片上显示文字，经常会遇到这个情况，就是当文字和背景颜色差不多时，文字会看不清楚，我们一般通过给文字加text shadow或者修改图片的透明度来让文字显示更加突出。我们今天说一下透明度的问题，一般我们干这个活儿是通过photoshop来做，其实CSS本身也可以实现类似的效果。如何做？

咱们先从下面这个例子开始，有一张背景图片，上面有些文字：

对应的显示效果如下：