CSS背景图像变暗 [英] CSS background image make darker

问题描述

我有以下内容：

I have the following: www.thewhozoo.com

As you can see, it has a background image.

.top-container {
    float: left;
    width: 100%;
    background: url('../images/background1.jpg') no-repeat center center fixed; 
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
  }

The background image has white text on top of it, which may be a little difficult to read.

I have added a text-shadow to the text, which has helped make the text stand out more.

.text-description-header {
    font-size: 250%;
    color: white;
    text-shadow: 0px 1px 14px rgba(0,0,0,1.0);
}

However, I would like the text to stand out even more.

Question

1. Are there suggestions how I can make the text-shadow even darker?
2. Or, make the background image a little darker?

Thanks

解决方案

I would go for photoshop to blur the background or give it an overlay. However you can try giving it a linear gradient on your top-container class before the url call on the background-image as so:

background: linear-gradient( rgba(0,0,0,0.5), rgba(0, 0, 0, 0.5) ),url(../images/background1.jpg) no-repeat center center fixed;

just change the rgba value to what you need. Hope this helps.

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