封面背景图+渐变背景

Question

我正在构建一个网站，并尝试设置一个带有背景图像的部分 以覆盖生成的所有部分和渐变背景。我尝试将它们放在一起但它并没有真正起作用，这就是我尝试过的： https://jsfiddle.net/gmtujnmh/

#fullcover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: center;
  max-height: 60%;
  display: inline;
  background-image: url(http://www.materials-world.com/bricks/belden/whites/images/AlaskaWhiteVelourWT.jpg);
  /* fallback */
  background: rgba(62, 21, 49, 1);
  background: -moz-linear-gradient(-45deg, rgba(62, 21, 49, 1) 0%, rgba(162, 23, 128, 1) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(62, 21, 49, 1)), color-stop(100%, rgba(162, 23, 128, 1)));
  background: -webkit-linear-gradient(-45deg, rgba(62, 21, 49, 1) 0%, rgba(162, 23, 128, 1) 100%);
  background: -o-linear-gradient(-45deg, rgba(62, 21, 49, 1) 0%, rgba(162, 23, 128, 1) 100%);
  background: -ms-linear-gradient(-45deg, rgba(62, 21, 49, 1) 0%, rgba(162, 23, 128, 1) 100%);
  background: linear-gradient(135deg, rgba(62, 21, 49, 1) 0%, rgba(162, 23, 128, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#3e1531', endColorstr='#a21780', GradientType=1);
}

<div id="fullcover"></div>

从 cssmatic 中获取的渐变代码，有人可以帮助我吗？

Answer 1

您 fiddle 中的代码与您在此处发布的代码不匹配，此答案适用于 fiddle.

中的代码

您需要为渐变添加一些不透明度，它为我解决了这个问题，这里有一个 fiddle 给您：

https://jsfiddle.net/gmtujnmh/2/

#fullcover{
    position: absolute;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position: center;
    max-height: 60%;
    display:inline;

    background-image: url(http://www.materials-world.com/bricks/belden/whites/images/AlaskaWhiteVelourWT.jpg); /* fallback */

background-image: -webkit-gradient(
  linear, left top, left bottom, from(rgba(62,21,49,.6)),
  to(rgba(162,23,128,.9)), color-stop(.5,#333333)
), url(http://www.materials-world.com/bricks/belden/whites/images/AlaskaWhiteVelourWT.jpg); /* Chrome 10+, Saf5.1+ */

现在您只需调整颜色和不透明度即可获得您想要的效果，希望对您有所帮助。

Answer 2

试试这个。

  body{
      background:url("https://upload.wikimedia.org/wikipedia/commons/f/f0/Googlelogo1997.jpg") no-repeat center center, linear-gradient(green, blue);
    height:100%;
    }
    html{height:100%;}

  

    <body>
    here we go
    </body>

封面背景图+渐变背景

Cover background image + gradient background

css

gradient

background-image