如何在css漸變上保留背景圖像

我已經創建了一個css漸變。試圖在上面放置一個圖像。下面是我的代碼。如何在css漸變上保留背景圖像

style.css 
.body { 
    margin:0; 
    padding:0; 
    height:70%; 
    border-style:dotted solid; 
    border-color:#38FFBE; 
} 
.container { 
    height:90%; 
    position:relative; 
} 
.header { 
    padding:10px; 
    height:40%; 
    border-style:dotted solid; 
    border-color:#38FFBE; 
    background-image: linear-gradient(left bottom, rgb(95,255,41) 41%, rgb(156,255,255) 71%, rgb(232,171,235) 86%); 
    background-image: -o-linear-gradient(left bottom, rgb(95,255,41) 41%, rgb(156,255,255) 71%, rgb(232,171,235) 86%); 
    background-image: -moz-linear-gradient(left bottom, rgb(95,255,41) 41%, rgb(156,255,255) 71%, rgb(232,171,235) 86%); 
    background-image: -webkit-linear-gradient(left bottom, rgb(95,255,41) 41%, rgb(156,255,255) 71%, rgb(232,171,235) 86%); 
    background-image: -ms-linear-gradient(left bottom, rgb(95,255,41) 41%, rgb(156,255,255) 71%, rgb(232,171,235) 86%); 

background-image: -webkit-gradient(
    linear, 
    left bottom, 
    right top, 
    color-stop(0.41, rgb(95,255,41)), 
    color-stop(0.71, rgb(156,255,255)), 
    color-stop(0.86, rgb(232,171,235)) 
); 

background: url(apples.jpg) no-repeat left bottom, -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7) ; 
background: url(apples.jpg) no-repeat left bottom, -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)); 
} 
.body { 
    padding:10px; 
    padding-bottom:60px; /* Height of the footer */ 
    background-color:#CAFF70; 
} 
.footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:80px; /* Height of the footer */ 
    background:#CAFF70; 
}

回到Home.jsp

<%@taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%> 
<%@taglib uri="/WEB-INF/struts-html.tld" prefix="html" %> 
<%@taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles"%> 
<html> 
<head> 
<title>MindBest</title> 
</head> 
<style type="text/css"> 
<%@include file="../include/style.css"%> 
</style> 
<body> 
<div class="container"> 
<div class="header">Header</div> 
<div class="body">Body</div> 
<div class="footer">Footer</div> 
</div> 
</body> 
</html>

我已經嘗試了上述code.but梯度是完全changed.can請人幫我到圖像對齊gradient.As的左側是新來的css.Can任何人都可以幫忙嗎？

來源

2012-06-03 rkhm

其緊急情況..事先提供幫助 – rkhm

這是你想要實現的嗎？ http://jsfiddle.net/PhilippeVay/VPjP9/

我添加了一個圖像梯度的第一個意甲（我刪除那些沿着apple.jpg人，無法瞭解他們在那裏做）與物業background-image，然後寫了這些圖片background-position和background-repeat （圖像和漸變）。

由於有衆多的供應商前綴來管理，它更容易只寫什麼是需要的background-image部分，然後對所有的瀏覽器background-position和background-repeat不需要任何供應商名稱寫一次。

來源

2012-06-03 08:36:38 FelipeAls

是的菲利佩正在嘗試somewaht這樣。我想放置多個圖像，並想在不同位置對齊如何對齊？ – rkhm

例如，您可以更改'background-position'，'background-position：50px center，left top;'的值。之前逗號是上面的那個（你的圖片） – FelipeAls

Thanx.tat作品 – rkhm

如何在css漸變上保留背景圖像

回答

相關問題