向圖像添加CSS漸變 - 不是背景圖像

這是一個使用旋轉木馬的頁面（我相信flexslider）。這個carrousel中的圖像不是背景圖像。我需要爲圖像添加一個漸變，從下到上，從黑暗到零不透明，這樣我才能使文字更清晰。這可能嗎？向圖像添加CSS漸變 - 不是背景圖像

http://hungersolutionsny.magadev.net

2013-07-30 MDLG

你試過了什麼？你能告訴我們一些代碼嗎（不只是一個鏈接到你的網站，我們希望你的問題在未來對其他人有用）？ – Pevara

個人我不添加標記只是爲了造型的大風扇。我會去僞元素:before或:after

的代碼會是這個樣子：

HTML

<div class='slideshow-wrapper'> 
    <img src='http://www.placekitten.com/800/300'/> 
    <h2 class='title'>Some title</h2> 
</div>

CSS

.slideshow-wrapper { 
    position:relative; 
    float: left; 
} 
.title { 
    position: absolute; 
    left: 0; 
    right: 0; 
    text-align: center; 
    z-index: 2; 
} 
.slideshow-wrapper:before { 
    content: ''; 
    position:absolute; 
    top:0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); 
    z-index: 1; 
}

和示例：http://jsfiddle.net/VrGeM/

來源

2013-07-30 19:32:55 Pevara

嗨，彼得，我覺得這很有趣，但我沒有看到它在我自己的測試中，甚至在你提供的鏈接上工作......？ – MDLG

您可能需要爲漸變代碼添加前綴。它應該可以正常工作。這裏是其他瀏覽器前綴的小提琴（確定IE8及以上）：http://jsfiddle.net/VrGeM/1/ – Pevara

通過從CSS漸變生成器中獲取代碼來實現這個功能。謝謝！我確實已經讀過，僞選擇器應該使用雙冒號，以便它可以在IE中使用。我無法在IE9中測試，因爲我沒有副本。你知道這是否適用於IE9？ – MDLG

疊加與絕對定位<div>這就是尺寸隨着滑塊相同的圖像。給那<div>的梯度。確保它位於圖像上方，但低於圖像頂部的文字。

創建一個透明的PNG使用而不是一個CSS漸變也很容易，它將具有在舊版IE中工作的優勢。

來源

2013-07-30 19:23:16

請注意，如果沒有JavaScript破解，透明PNG將無法在IE 6中運行。 –

的確如此，但我認爲在這一點上IE6幾乎已經死了。不幸的是，IE8不是。 –

IE 6和7是不是一個問題。我們不支持他們。謝謝！ – MDLG

我通常這樣做的方式是通過位於圖像頂部幷包含文本的絕對定位的DIV。於是我給那個不透明像這樣：

background-color: rgba(0, 0, 0, 0.56);

如果你想與不透明的梯度，這是一個很好的工具，這使得那麼容易：http://www.colorzilla.com/gradient-editor/

來源

2013-07-30 19:23:36 Michelle

有許多的方法來解決這一點。主要針對background CSS屬性。如果你正在尋找的目標是重疊的圖像，你可以使用一些簡單的像這樣的文字：

body.front #region-content #flexslider-1 ul.slides .views-field-field-banner-statement { 
    background-color:rgba(0, 0, 0, 0.5); 
}

不適漸變，但它確實提供一個黑色的背景與50％的不透明度。

enter image description here

來源

2013-07-30 19:28:59 hungerstar

我通常不會以這種方式使用漸變......在過去遇到這個問題時，我總是在包裹圖像的div上使用嵌入的陰影。事情是這樣的......

<div class="img-wrap"> 
    <img src="" /> 
</div>

然後在CSS應用的box-shadow爲僞選擇...

.img-wrap { 
    display: block; 
    position: relative; 
} 

.img-wrap:before { 
    display: block; 
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    -webkit-box-shadow: inset 0 -100px 80px 0px rgba(0,0,0,0.4); 
} 

img { 
    display: block; 
    width: 100%; 
    height: auto; 
}

看看這個CodePen如果你想現場觀看... http://cdpn.io/qGwLe

來源

2013-07-30 19:48:15 arnonate

向圖像添加CSS漸變 - 不是背景圖像

回答

相關問題