2016年網站橫幅的圖像效果

Question

我一直在尋找這個圖像效果的名稱，但無法找到答案，因爲我真的不知道應該放在搜索引擎上。所以我決定訪問這裏向你們發佈一個問題，希望我能得到答案。這是image effect

Answer 1

該效果稱爲漸變，某人在圖像頂部覆蓋半透明漸變。

你可以用HTML/CSS做到這一點。 Gradients in CSS

You'll need to check this out to get the gradients to be transparent though

的HTML會是這個樣子：

<div id="container> 
    <img src="path/to/img.jpg"> 
    <div id="gradient"/> 
</div> 

和你的CSS可能是什麼樣子的例子可能是：

#container { 
    position: relative; 
} 

#container img { 
    width: 100%; 
} 

#gradient { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    /* note: this CSS has gradients but to make them transparent check out the link I sent above */ 
    background: red; /* For browsers that do not support gradients */ 
    background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(red, yellow); /* Standard syntax */ 
} 

你也可以做它只需在photoshop中，將圖像用作背景圖層，然後將另一圖層放在頂層，然後製作一個圖層t在圖像上方，並將不透明度設置爲70％左右。希望這可以幫助！