css - 用移动设备的颜色替换背景图像

Question

我一直在搜索和尝试不同的东西，但我什么都做不了。我在 this page 的顶部有一个背景图片顶部有浅黄色文字。

我正在使用此代码使其响应。

.homepage-intro{ 
background: url('http://inboundmarketing.digitalhive.buzz/hubfs/dec-2015-images/bee-flower-purple.png') no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

但在移动设备上，浅黄色文本位于花朵浅黄色部分的顶部，所以我想将图像换成颜色 #634356，但我通过搜索和使用建议的代码尝试的任何方法都不起作用。

谢谢。

Answer 1

在 CSS 中尝试此媒体查询以及您的 noraml CSS

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
.homepage-intro{ 
 background: #yourColor; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}
}

/*normal css*/
.homepage-intro{ 
background: url('http://inboundmarketing.digitalhive.buzz/hubfs/dec-2015-images/bee-flower-purple.png') no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}