Как я могу применить постепенное размытие к фоновому изображению (чтобы текст наложения легко читался)?

Question

У меня есть большое фото, например http://www.bestwallpapersfan.com/wp-content/uploads/2014/05/1755137.jpg. Я хочу наложить текст рядом со своим дном.

Чтобы гарантировать, что текст читается, я хочу использовать подход пола Размытие описанный здесь: https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96#dc39-765a9789c924

я узнал, как сделать простой Floor Затемнение или простой размытия (как описано ниже: https://css-tricks.com/design-considerations-text-images/).

Но как я могу объединить эффекты так, чтобы это постепенное/градиентное/прогрессивное размытие?

Спасибо!

Answer 1

Это довольно близко к тому, что я искал, и теперь просто необходимо очистить до фиксации funkiness с h1 и т.д.

.container { 
 
    width: 400px; 
 
    height: 300px; 
 
    position: relative; 
 
} 
 

 
.gradient { 
 
    position: absolute; 
 
    width: 400px; 
 
    height: 300px; 
 
    margin: 20px; 
 
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)); 
 
    opacity: 0.99; 
 
    z-index: 2; 
 
} 
 

 
.module { 
 
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg); 
 
    background-attachment: fixed; 
 
    width: 400px; 
 
    height: 300px; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    margin: 20px; 
 
    z-index: 1; 
 
} 
 

 
.module>header { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    padding: 20px 10px; 
 
    background: inherit; 
 
    background-attachment: fixed; 
 
    z-index: 3; 
 
} 
 

 
.module>header::before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 30px; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: inherit; 
 
    background-attachment: fixed; 
 
    -webkit-filter: blur(12px); 
 
    filter: blur(12px); 
 
    transform: scale(2) translateY(20px); 
 
} 
 

 
.module>header>h1 { 
 
    margin: 0; 
 
    color: white; 
 
    position: relative; 
 
    z-index: 4; 
 
} 
 

 
.title { 
 
    margin: 0; 
 
    color: white; 
 
    position: absolute; 
 
    z-index: 4; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
}

<div class="container"> 
 
    <div class="gradient"> 
 
    </div> 
 
    <div class="module"> 
 
    <header> 
 
     <h1> 
 
     Skyscraper 
 
     </h1> 
 
    </header> 
 
    </div> 
 
    <div class="title"> 
 
    Skyscraper 
 
    </div> 
 
</div>

Answer 2

Вы можете использовать html5 холст, чтобы сделать что прогрессивные градиентных

Белый текст аннотации без прогрессивного градиента:

Аннотация с прогрессивным градиентом:

Пример кода и демо:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/annotateMe.jpg"; 
 
function start(){ 
 
    cw=canvas.width=img.width; 
 
    ch=canvas.height=img.height; 
 
    ctx.drawImage(img,0,0); 
 

 
    var g=ctx.createLinearGradient(0,ch-100,0,ch); 
 
    g.addColorStop(0.00,'rgba(0,0,0,.1)'); 
 
    g.addColorStop(1.00,'rgba(0,0,0,.75)'); 
 
    ctx.fillStyle=g; 
 
    ctx.fillRect(0,ch-100,cw,100); 
 

 
    ctx.fillStyle='white'; 
 
    ctx.font='24px verdana'; 
 
    ctx.textAlign='center'; 
 
    ctx.textBaseline='bottom'; 
 
    ctx.fillText('Natural Beauty',cw/2,ch-5); 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>

Answer 3

Вы осложнено немного слишком много, попробуйте этот JSFiddle

HTML:

<div class="container"> 
     <div id="header"> 
      <h1>Skyscraper</h1> 
     </div> 
</div> 

CSS:

* { 
    margin:0; 
    padding:0; 
} 
.container { 
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg); 
} 
.container, 
#header { 
    width: 400px; 
    height: 300px;; 
} 
#header { 
    position:relative; 
    z-index:100; 
} 
h1 { 
    width:400px; 
    height:100px; 
    line-height:100px; 
    font-size:30px; 
    color:#ffffff; 
    position:absolute; 
    bottom:0; 
    left:0; 
    z-index:101; 
    text-align:center; 
    /* Gradient to h1 */ 
    background: rgba(255,93,177,0); 
    background: -moz-linear-gradient(top, rgba(255,93,177,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 100%); 
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,93,177,0)), color-stop(50%, rgba(0,0,0,0.5)), color-stop(100%, rgba(0,0,0,1))); 
    background: -webkit-linear-gradient(top, rgba(255,93,177,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 100%); 
    background: -o-linear-gradient(top, rgba(255,93,177,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 100%); 
    background: -ms-linear-gradient(top, rgba(255,93,177,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 100%); 
    background: linear-gradient(to bottom, rgba(255,93,177,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5db1', endColorstr='#000000', GradientType=0); 
}