css - 封面背景图+渐变背景

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+ */

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