封面背景图+渐变背景答案

【问题标题】：Cover background image + gradient background封面背景图+渐变背景
【发布时间】：2016-09-07 05:53:54
【问题描述】：

我现在正在建立一个网站并尝试设置一个带有背景图像的部分以覆盖所有生成的部分和渐变背景。我尝试将它们放在一起，但它并没有真正起作用，这就是我尝试过的： 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);
}

&lt;div id="fullcover"&gt;&lt;/div&gt;

它取自 cssmatic 的渐变代码，有人可以帮帮我吗？

【问题讨论】：

this 你想做什么？
是，但渐变不起作用
嗯，为什么是渐变和全图？你想玩 oppacity 吗？
如果你想覆盖整个屏幕只需删除 max-height
exaclty，问题出在 wordpress 网站上，我无法制作另一个部分或 div

标签： css background-image gradient

【解决方案1】：

您的小提琴中的代码与您在此处发布的代码不匹配，此答案适用于小提琴中的代码。

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

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

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

【讨论】：

另一个问题，我能告诉我的背景图片从哪里开始吗？
您可以通过使用像素、关键字或百分比来使用背景位置属性移动背景图像...如果您想要与此不同的东西，您可能应该做一些研究，看看是否有一些有用的东西，如果没有，您可以随时创建一个新问题 :)

【解决方案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>

【讨论】：