Question

我知道有背景图像和背景颜色没问题，但在这种情况下它不起作用，我也不知道为什么。

有谁知道如何解决这个问题？

background: #FFFFFF; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#FFFFFF, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#FFFFFF, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FFFFFF, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(#FFFFFF, yellow); /* Standard syntax */
border-bottom: 1px solid #e3e3e3;

background-image: url('images/bg_page.jpg');
background-repeat: no-repeat;    
background-position: right bottom;

Answer 1

我找到了解决方案，不知怎的，你必须将它组合起来然后才能起作用：

background-color: #FFFFFF;
background: url(images/bg_page.jpg);
background: url(images/bg_page.jpg) right bottom no-repeat, #FFFFFF; /* For browsers that do not support gradients */
background: url(images/bg_page.jpg) right bottom no-repeat, -webkit-linear-gradient(#FFFFFF, #828282); /* Safari 5.1 to 6.0 */
background: url(images/bg_page.jpg) right bottom no-repeat, -o-linear-gradient(#FFFFFF, #828282); /* For Opera 11.1 to 12.0 */
background: url(images/bg_page.jpg) right bottom no-repeat, -moz-linear-gradient(#FFFFFF, #828282); /* For Firefox 3.6 to 15 */
background: url(images/bg_page.jpg) right bottom no-repeat, linear-gradient(#FFFFFF, #828282); /* Standard syntax */

Answer 2

使用渐变替换图像，没有简写语法：background-image: linear-gradient (#FFFFFF, yellow);因此，当您调用图像时会覆盖先前的渐变背景。您可以使用以逗号分隔的多个bakgrounds：

＆＃13;

.gradient {
  height: 600px;
  width: 600px;
  border-bottom: 1px solid #e3e3e3;
  background-image: url('https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png'), linear-gradient(#FFFFFF, yellow);
  background-repeat: no-repeat;
  background-position: center center;
}

＆＃13;

<div class="gradient"></div>

＆＃13;

Answer 3

工作正常：

＆＃13;

div{
  width:500px;
  height:300px;
  background: #FFFFFF; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#FFFFFF, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#FFFFFF, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FFFFFF, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(#FFFFFF, yellow); /* Standard syntax */
border-bottom: 1px solid #e3e3e3;

background-image: url('http://www.mapmonde.org/blog/wp-content/uploads/2011/07/4-Bahamas12.jpg');
background-repeat: no-repeat;    
background-position: right bottom; 
  }

＆＃13;

<div></div>

＆＃13;

但我认为你想要这个：

＆＃13;

div{
  width:500px;
  height:500px;
  background: #FFFFFF; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#FFFFFF, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#FFFFFF, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FFFFFF, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(#FFFFFF, yellow); /* Standard syntax */
border-bottom: 1px solid #e3e3e3;
 
  }

＆＃13;

<div><img src='http://www.mapmonde.org/blog/wp-content/uploads/2011/07/4-Bahamas12.jpg' /></div>

＆＃13;

背景图像和颜色碰撞

3 个答案: