Question

我有一个页面，其背景图像类似于羊皮纸。有一个较长的文本部分，我们希望淡入第一段的最后一行左右，然后添加一个“阅读更多”按钮以下拉其余部分。有许多使用纯色背景的淡入淡出文本的示例，但是我找不到使用背景图像（不是纯色）的任何示例。（页面：https://kringle.cash/goodwillFade.php）

我已经尝试了大约20个不同的示例，但到目前为止，我还无法将其中的任何一个变形为实际使用真实图像为背景的整个文本淡入淡出效果。

诚然，由于我是专业的后端程序员，因此我对CSS和效果不是很精通。任何帮助将不胜感激。

TIA

Answer 1

简单的技巧-使用主背景进行淡入淡出效果。

HTML

<div class="container">
  <p class="container__content">
    Note: This is just a hack.
    Your implementation may differ.
    This example only has the visual part display part i.e
    showing fading option before the full document is shown.
    You need to hide the pesudo class on button click.
  </p>
  <button class="container__more-btn">Read More</button>
</div>

CSS

.container {
  position: relative;
  background: url(img.jpg);
}

.container__content {
  position: relative;
}

.container__content::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 2rem;
  background: url(img.jpg);
  left: 0;
  bottom: 0;
  opacity: 0.7;
}

.container__more-btn {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

根据需要在 container__content :: after 中调整高度和不透明度。

也可以更改图像。随时询问是否不清楚。

Answer 2

没有简单的方法可以解决您的问题。您的背景图片是带有纯色的JPG。仅仅改变opacity是不够的。一个linear-gradient本身对实心图像无能为力。

所以，我做了什么：

使用Photoshop，白色背景创建一个新的'notice_back'图像，添加了噪点（使用fg色白色和bg色＃d5d5d5），删除了许多白色像素以获取透明度，做了非常微妙的高斯模糊（0.4 ），并将文件另存为PNG（带有Alpha通道）。
新的PNG现在用作background-image和<body>顶部和底部渐变的.container而不是原始JPG。这是解决方案的[强制性]。
body {background-color: rgba(220,220,220,1)}用于为删除的PNG像素填充某种颜色（任何颜色都可以，但是我们需要保持与原始颜色接近）。
background-color: rgba(220,220,220,.8)，略微透明，以使像素从顶部和底部逐渐发光。
我们使用background-image而不是linear-gradient来填充mask-image，该渐变具有黑色到透明的渐变，该渐变会逐渐遮挡像素。（我不知道其背后的技术，但与输入和输出像素的XOR运算有关。）

我创建了一个带有大而粗体文本的演示程序，以查看效果（否则，使用这些浅色会很难）。如果需要的话，放大它确实可以。...

代码：

/*******************/
/* SO60741467 demo */
/*******************/
body { /* [MANDATORY] (parent container) */
    background-color: rgba(220,220,220,1); /* darkest color that appears in 'background-image' */
}

.container { position: relative } /* [MANDATORY] stacking context for :before/:after */

body,
.container:before,
.container:after { /* [MANDATORY] */
    background-image     : url(https://i.stack.imgur.com/HvnVb.png); /* background image PNG with transparent pixels */
    background-repeat    : repeat;
    background-attachment: fixed;
}

.container:before,
.container:after { /* [MANDATORY] */
    position: fixed; left: 0; width: 100%; height: 6rem; content: '';
 
    /* same as <body> but with subtle transparency, adjust to needs */
    background-color: rgba(220,220,220,.8);
}
.container:before { /* [MANDATORY] */
    top: 0;     /* position at top of text */
                /* start with solid color, end transparent */
    mask-image: linear-gradient(rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);
}
.container:after { /* [MANDATORY] */
    bottom: 0;  /* position at bottom of text */
                /* start transparent, end with solid color */
    mask-image: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 75%);
}
/************************/
/* personal preferences */
/************************/
html,body             { box-sizing: border-box; width: 100%; max-width: 100%; height: 100%; margin: 0 }
*::before,*::after, * { box-sizing: inherit }

/******************/
/* eye-candy only */
/******************/
/* responsive document font-size */
html { font-size: calc(0.625vmin + 12px) } /* y=mx+b for p1(320,14) p2(1280,20) */
body { font-size: 1rem }

.container {
    width: calc(61.25vmin + 104px); /* y=mx+b for p1(320,300) p2(1920,1280) */
    margin: 0 auto;                 /* center horizontally */
    font-size: 1.5em;               /* larger font to fill screen with text */
    font-weight: bold;              /* to see effect even better */
}

<div class="container">
    <h2>Lorem Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
        deleniti copiosae.</p>
    <p>Cu vel debet nobis, repudiare deseruisse reprehendunt usu ad. Ex elit idque nam. Omnis munere detraxit mei te, eu labore appareat verterem
        est. Mel ex oporteat consectetuer.</p>
    <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
        Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
        qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
    <p>Pri te amet electram. Tation commodo minimum cu pri, utamur minimum id pri. No legimus atomorum vim. Vix id putent iuvaret salutandi, mel
        phaedrum conceptam ut.</p>
    <p>Nam id utinam referrentur, similique intellegebat ad mel, eu nobis aeterno qui. Ad quodsi cetero sed, deserunt disputando nam an, veri
        viderer consetetur vel an. Zril vivendo pro no, oratio scripta quo eu, aeque elaboraret duo et. Ea nonumy essent sed, enim cetero pri an. An
        zril facete ius.</p>
    <p>Id delectus fabellas praesent duo, ei vim consequat democritum. An mei tamquam iuvaret philosophia, amet vitae usu at. Errem equidem eam
        eu, per sumo audire vocibus an, ridens laoreet duo ut. Pro te velit efficiendi, an ius tation noster. Inimicus argumentum eu quo, no invenire
        mandamus philosophia nam. Simul placerat efficiendi eu eum.</p>
    <p>Sed ex quas mazim intellegam. Ad harum dicant sanctus vis, etiam assum complectitur his ex, solum noster instructior id mei. His brute
        facilis adversarium eu, vix officiis persecuti incorrupte te. Te odio mundi sanctus has. Cetero blandit pertinax te cum, cum solet
        theophrastus ex.</p>
    <p>Erant iudico ei nam, no nihil malorum vituperatoribus mel. Graeci pericula eos cu, ad oratio partem abhorreant quo. No aeterno fastidii
        legendos vel, pro vide dissentiet an. Possit epicurei definiebas eos no, eum no diam augue. Sed ex tritani diceret tacimates, ea latine
        singulis interpretaris vis, vel quaestio definiebas at.</p>
    <p>Ei scripta imperdiet has. Wisi vivendo pri te, mel lorem quodsi sensibus ne, in cum eripuit platonem evertitur. Vis an quis possit
        voluptatibus. Eum fastidii appareat id. Augue elitr bonorum per at, nam ne veri possit scribentur.</p>
    <p>An probo etiam sit, ut agam epicuri similique eum. Dicam iuvaret in mel, no has consul causae vocibus, ad veniam aperiam voluptatibus sed.
        Posse inimicus necessitatibus pri an, no sed invidunt laboramus. Nostrum sadipscing ex sea, ad pro idque suscipiantur.</p>
</div>

CSS文本淡出-阅读更多非纯色背景图片

2 个答案: