Image 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％程度に設定します。お役に立てれば！