追加到CSS

我在網站上使用的背景圖像上的線性漸變，而是因爲我想隨機化圖像我有一點PHP邏輯灑。追加到CSS

見下文。

<div class="jumbotron hidden-xs hidden-sm" id="headerhome" style="background: -webkit-linear-gradient(rgba(166, 195, 206, 0.5), 
    rgba(166, 195, 206, 0.5)), 
    linear-gradient(
    to bottom, 
    rgba(64, 64, 64, 0) 70%, 
    rgba(77, 78, 94, 0.5) 80% 
    ), url('img/home/hero-img/hero-img-<?php echo $rand ?>.jpg'); 

    background: -o-linear-gradient(rgba(166, 195, 206, 0.5), 
    rgba(166, 195, 206, 0.5)), 
    url('img/home/hero-img/hero-img-<?php echo $rand ?>.jpg'); 

    background: -moz-linear-gradient(rgba(166, 195, 206, 0.5), 
rgba(166, 195, 206, 0.5)), 
    url('img/home/hero-img/hero-img-<?php echo $rand ?>.jpg'); 

    background: -linear-gradient(rgba(166, 195, 206, 0.5), 
rgba(166, 195, 206, 0.5)), 
    url('img/home/hero-img/hero-img-<?php echo $rand ?>.jpg'); 

    background-blend-mode: multiply;">

有沒有一種方法可以爲CSS文件中的headerhome創建樣式，然後在URL段中添加內聯樣式。

基本上我試圖找出這樣做，因爲儘管當前代碼工作的一個比較乾淨的方式，我被告知這是不成立。

鑑於此，是有必要定義漸變爲每一個瀏覽器？

來源

2016-12-13 Jesse Orange

這是一個非常好的問題。我正在嘗試使用'inherit'來實現這一點，但直到現在還沒有運氣。 –

如果我進一步管理任何事情，我會重新發布它。 –

我不認爲它可以進一步管理。我認爲唯一可以做的是在不同的類中使用不同的圖像（以及相同的漸變，使用供應商前綴），並使用php或javascript隨機切換這些類。 –

您可以將圖像before僞元素，擺脫實現圖像每個瀏覽器設置漸變性。

.container { 
 
    position:relative; 
 
    width:100px; 
 
    height:100px; 
 
} 
 
.container:after { 
 
    position:absolute; 
 
    left:0;right:0;top:0;bottom:0; 
 
    content: ""; 
 
    background: url('http://www.emtec-international.com/sites/default/files/sd4-2gb-largesize.png'); 
 
}

<div class="container" style="background: linear-gradient(red, yellow);"> 
 
</div>

來源

2016-12-13 10:14:33 Sojtin

它實際上是另一種方式，我指的是背景圖片的URL應該是在類內聯風格和梯度。無論如何，這會影響'background-blend-mode'。我不知道OP是否適用。 –

回答

相關問題