CSS로 고정 된 배경 이미지에 '선형 그래디언트'를 사용하는 방법

background-image에 linear-gradient을 사용하고 있습니다. background-attachment을 fixed으로 설정하기 전까지는 제대로 작동했습니다.CSS로 고정 된 배경 이미지에 '선형 그래디언트'를 사용하는 방법

어떻게 background-attachment: fixed;

.photo { 
 
    background-image: 
 
    linear-gradient(
 
     to bottom, 
 
     rgba(255,255,255,0) 80%, 
 
     rgba(255,255,255,1) 100% 
 
    ), 
 
    url(https://s30.postimg.org/v67rh5bdd/image.jpg); 
 
    background-attachment: unset; /* 'fixed' does not work */ 
 
    background-position: center top; 
 
    background-repeat: no-repeat; 
 
    width: 100%; 
 
    height: 55vh; 
 
    position: absolute; 
 
} 
 
.panel { 
 
    margin-top:30vh; 
 
} 
 
.panel-body { 
 
    height: 100vh; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
    <div clasas="row"> 
 
     <div class="photo"></div> 
 
     <div class="col-xs-10 col-xs-offset-1"> 
 
     <div class="panel panel-primary"> 
 
      <div class="panel-heading"> 
 
      <h3 class="panel-title">Panel title</h3> 
 
      </div> 
 
      <div class="panel-body"> 
 
      Panel content 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
<script src="https://code.jquery.com/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</body> 
 
</html>

또는 jsbin와 같은 효과를 수행 할 수 있습니다

출처

2017-01-11 Mert S. Kaplan

는 흰색 그라데이션을 가지고있는 의도를 고정 그림의 "맨을 통해 이동", 또는 두 가지 모두가 페이지 상단에 고정 된 상태를 유지하도록 ? – haxxxton

http://jsbin.com/miqizetoqu/edit?css,output 왜 기울기를 유지하기 위해 .photo 사업부에 의사 요소를 사용하지 마십시오. 이것은 절대적으로 이미지의 상단에 위치 할 수 있습니다.

.photo { 
    background-image: url(https://s30.postimg.org/v67rh5bdd/image.jpg); 
    background-attachment: fixed; 
    background-position: center top; 
    background-repeat: no-repeat; 
    background-size: cover; 
    width: 100%; 
    height: 55vh; 
    position: absolute; 
} 

.photo::before { 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 

    background: 
    linear-gradient(
     to bottom, 
     rgba(255,255,255,0) 80%, 
     rgba(255,255,255,0.1) 82%, 
     rgba(255,255,255,0.2) 84%, 
     rgba(255,255,255,0.3) 86%, 
     rgba(255,255,255,0.4) 88%, 
     rgba(255,255,255,0.5) 90%, 
     rgba(255,255,255,0.6) 92%, 
     rgba(255,255,255,0.7) 94%, 
     rgba(255,255,255,0.8) 96%, 
     rgba(255,255,255,0.9) 98%, 
     rgba(255,255,255,1) 100% 
    ); 
}

이 빈 참조 :

http://jsbin.com/tepalahipe/edit?css,output

출처

2017-01-11 01:17:52 Carlton

CSS로 고정 된 배경 이미지에 '선형 그래디언트'를 사용하는 방법

답변

관련 문제