使用背景圖像以及css3漸變

我無法使用背景圖像和css3漸變。我已經經歷了許多解決方案，但仍然無法獲得圖像。 My Fiddle 使用背景圖像以及css3漸變

使用的圖像是transparent.I've嘗試添加背景圖像：URL（「img.png」），-webkit ..但這似乎並不work.Also試過具有在下面的方式一個div ..

<div id="div-with-gradient"> 
    <div id="div-with-image"> 
    <!-- content --> 
    </div> 
</div>

任何解決方案真的感激..

來源

2012-07-17 user1184100

可能的重複：http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients – 2012-07-17 16:04:39

這是一個重複的問題。 http://stackoverflow.com/questions/5681813/css3-transparent-background-image-and-gradient – imakeitpretty 2012-07-17 23:53:57

顯然這裏已經有很多討論！ :-)請在發佈問題之前先搜索一下。 – imakeitpretty 2012-07-17 23:55:02

你可能要檢查這個演示中，我做了上週http://dabblet.com/gist/3106299

它在同一元素上使用圖像和CSS3漸變。

關於你的小提琴，url('../img/msg_arrow.png')不會的jsfiddle工作 - 你需要指定的完整路徑。

而且，你用

.btn1 { 
    background-color: #f47e29; 
    border: solid 1px #b16127; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f48c41', endColorstr='#d66f24',GradientType=0); /* IE6-8 */ 
    padding: 0 26px; 
}

這臺固體橙色背景重寫你的風格。

而且我注意到剛纔另一件事：使用background-image是不正確的或者：

background-image: url('../img/msg_arrow.png') scroll 0 0 no-repeat, linear-gradient(bottom, #000000, rgba(0,0,0,.12) 0%, rgba(0,0,0,.12) 49%, rgba(72,72,72,.12) 50%, rgba(247,245,245,.12));

您需要使用background有代替background-image。

最後，還有一點需要注意的是，背景是堆疊顯示的，上面列出的背景是堆棧底部。在你的情況下，它是在半透明圖像後面顯示的漸變。而且由於你的漸變是由具有0.12的第四RGBa值（alpha）的顏色組成的，所以它非常低，所以即使在一切工作正常的情況下，在另一個圖像後面也很難發現。

來源

2012-07-17 15:33:16 Ana

使用背景圖像以及css3漸變

回答

相關問題