背景画像と色が衝突する

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

それは正常に動作します：

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; 
 
    }

<div></div>

しかし、私はあなたがこのほしいと思う：

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; 
 
    
 
    }

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

Answer 3

勾配が画像を交換に使用され、何の省略形構文はありません：background-image: linear-gradient (#FFFFFF, yellow);したがって、あなたが呼び出すときイメージは前のグラデーションの背景を上書きします。 あなたは、カンマで区切った複数のbakgroundsを使用することができます。

.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; 
 
}

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