CSS 背景图像使颜色变暗
理查德
我有以下内容：www.thewhozoo.com
如您所见，它有一个背景图像。
.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;
}
背景图片上面有白色文字，可能有点难以阅读。
我text-shadow在文本中添加了一个，这有助于使文本更加突出。
.text-description-header {
font-size: 250%;
color: white;
text-shadow: 0px 1px 14px rgba(0,0,0,1.0);
}
但是，我希望文本更加突出。
问题
- 有什么建议可以让我变得
text-shadow更暗吗？ - 或者，让背景图像更暗一点？
谢谢
朱利安·埃斯皮诺萨
我会去Photoshop模糊背景或给它一个叠加。但是，您可以尝试top-container在背景图像上的 url 调用之前在您的类上给它一个线性渐变，如下所示：
background: linear-gradient( rgba(0,0,0,0.5), rgba(0, 0, 0, 0.5) ),url(../images/background1.jpg) no-repeat center center fixed;
只需将 rgba 值更改为您需要的值。希望这可以帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在CSS中使背景图像变暗？
- 2
使css图像背景变暗
- 3
使CSS背景图片变暗？
- 4
Javascript，更改颜色时更改CSS背景图像
- 5
如何使用CSS将文本颜色作为背景图像？
- 6
使CSS背景图像响应
- 7
背景图像路径css
- 8
使CSS背景图像响应
- 9
使 CSS 背景图像滚动
- 10
背景颜色和背景图像CSS3之间的过渡
- 11
<css>用css旋转背景图像
- 12
使用CSS更改背景图像的宽度
- 13
<img>顶部的CSS背景图像
- 14
从jQuery数组加载CSS背景图像
- 15
背景图像本身的CSS渐变
- 16
CSS响应式背景图像图
- 17
如何使CSS背景图像响应？
- 18
使CSS背景图像（SVG）响应
- 19
CSS：背景图像未显示
- 20
CSS背景图像删除组件
- 21
使背景图像适合HTML / CSS边框
- 22
背景图像模糊的CSS技巧
- 23
平滑的CSS背景图像过渡
- 24
CSS使背景图像未对齐
- 25
CSS将不会显示背景图像？
- 26
CSS：自适应背景图像的高度
- 27
gwt中的动态css背景图像
- 28
如何使CSS背景图像响应？
- 29
对CSS背景图像拉伸感到困惑
我来说两句