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>