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

你小提琴的代码与你在这里发布的代码不符，这个答案是针对小提琴中的代码。

你需要为渐变添加一些不透明度，它为我解决了它，这里有一个小提琴：

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

<TextView2IsToooooooooooooooooooLarge>
<Textview1>

现在你只需要使用颜色和不透明度来获得你想要的东西，希望它有所帮助。

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>

盖背景图象+梯度背景

2 个答案: