CSS/JS：それは私がCSSを使用してJS/jQueryの作成は可能です</p> <p><a href="https://i.stack.imgur.com/DrmAg.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DrmAg.jpg" alt="enter image description here"></a></p> <p>：単色の背景に背景画像のエッジ勾配

Question

だからdiv背景として、このイメージを、ウェブサイトのヘッダーを想像します画像の端に勾配があり、透明になりますか？または単色ですか？

マイideiaが背景エッジにグラデーションを適用し、この効果が得られ、その背後にある固体の色を適用することでした。

ありがとうございました。

Answer 1

この商品をお求めの客様はこんな商品もお求めです。

.container { 
 
    width: 75vw; 
 
    height: 75vh; 
 
    background: url("https://i.stack.imgur.com/DrmAg.jpg"); 
 
    position: relative; 
 
} 
 

 
.container::before, 
 
.container::after { 
 
    position: absolute; 
 
    content: ""; 
 
    display: block; 
 
    width: 50px; 
 
    height: 100%; 
 
    top: 0; 
 
} 
 

 
.container::before { 
 
    background: linear-gradient(to right, rgba(203, 130, 43, 1), rgba(203, 130, 42, 0)); 
 
    left: 0; 
 
} 
 

 
.container::after { 
 
background: linear-gradient(to left, rgba(203, 130, 43, 1), rgba(203, 130, 42, 0)); 
 
    right: 0; 
 
}

<div class="container"></div>