如何将渐变模糊应用于背景图像（以便文本叠加易于阅读）？

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 Fade to Black或一个简单的模糊（这两个都在这里描述：https://css-tricks.com/design-considerations-text-images/）。

但是如何将效果结合起来，使其逐渐/渐变/渐进模糊？

谢谢！

Answer 1

这与我正在寻找的非常接近，现在只需要清理以修复h1等的funkiness。

.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画布绘制渐进渐变

没有渐进式渐变的白色文本注释：

渐进渐变的注释：

示例代码和演示：

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

你有点复杂，试试这个JSFiddle

HTML：

<?php
    session_start();
    $data = $_POST;
    if (isset($data['submit'])) {
        $_SESSION['all_post'][] =  $data;
    }
    header('Location:screen3_2.php'); exit();
?>

CSS：

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