如何使用CSS使背景变暗？ [英] How to darken a background using CSS?

问题描述

我有一个有文本的元素。每当我减少不透明度，然后我减少全身的不透明度。有什么办法，我可以让 background-image 更暗，而不是其他一切？

I have an element with text in it. Whenever I decrease the opacity, then I decrease the opacity of the WHOLE body. Is there any way I can just make the background-image darker, and not everything else?

background-image:url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');

推荐答案

只需将此代码添加到您的图片css

Just add this code to your image css

background:
    /* top, transparent black, faked with gradient */ 
    linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ),
    /* bottom, image */
    url(http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png);
}

参考： linear-gradient（） - CSS | MDN

更新：并非所有浏览器都支持RGBa，因此您应该有一个备用颜色。这个颜色很可能是实心的（完全不透明的）例如： background：rgb（96，96，96）。有关RGBa浏览器支持，请参阅此博客。

UPDATE: Not all browsers support RGBa, so you should have a 'fallback color'. This color will be most likely be solid (fully opaque) ex:background:rgb(96, 96, 96). Refer to this blog for RGBa browser support.

这篇关于如何使用CSS使背景变暗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！