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と同じ効果を行うことができます。http://jsbin.com/miqizetoqu/edit?css,output

出典

2017-01-11 Mert S. Kaplan

は白い勾配を持って固定映像の「トップに上に移動」、またはその両方がページの最上部に固定されたまま持ってする意向であります？ – haxxxton

勾配を保持するために.photo divの上で擬似要素を使用しない理由。これは絶対に画像の上に置くことができます。

.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で固定背景画像に「線形グラデーション」を使用するには

答えて

関連する問題