Question

我可以设置覆盖页面的背景图像，但是绿色覆盖层不起作用。我究竟做错了什么？谢谢。

body {
    margin: 0 auto;
    padding: 0;
    background: url("../images/worldmap.jpg") no-repeat rgba(0,255,0,.5);
    /*background-image: url("../images/worldmap.jpg");*/
    /*background-repeat: no-repeat;*/
}

Answer 1

您可以尝试...

body {
    margin: 0 auto;
    padding: 0;
  background-size:cover;
  background:linear-gradient(0deg,rgba(0,255,0,.5);,rgba(0,255,0,.5);),url("../images/worldmap.jpg");
}

Answer 2

尝试一下

.overlay-image {
  width: 300px;
  height: 200px;
  background: linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45)),   url(https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg);
}

<div class="overlay-image"></div>

Answer 3

我通过在行的末端添加背景图片的网址来解决此问题。

.page{
        background: -moz-linear-gradient(rgba(0,255,0,.5)), url('https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg') no-repeat;
        background: -webkit-gradient(rgba(0,255,0,.5)), url('https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg') no-repeat;
        background: -webkit-linear-gradient(rgba(0,255,0,.5)), url('https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg') no-repeat;
        background: -o-linear-gradient(rgba(0,255,0,.5)), url('https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg') no-repeat;
        background: -ms-linear-gradient(rgba(0,255,0,.5)), url('https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg') no-repeat;
        background: linear-gradient(rgba(0,255,0,.5)), url('https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg') no-repeat;
        margin: 0 auto;
        padding: 0;
}

CSS颜色叠加背景图像

3 个答案: