css处理图片上的文字(内阴影)

做项目过程中，我们可能会遇到这样的一个组件，该组件的图像上方是文本。在某些情况下，根据所使用的图像，文字难以阅读，如文字是白色的，背景图偏浅。
这种情况有一些不同的解决方案，例如添加渐变叠加或着色的背景图像，文本阴影等。

简介
每个解决方案都应该解决一个问题。我们来探讨本案的问题。在设计图像上方有文字的组件时，我们需要注意使文字必须易于阅读的。

注意上图上，没有渐变覆盖的版本几乎不可读，这是对用户不利。为了解决这个问题，我们需要在文本下方添加一个图层，便于阅读。添加图层也有要注意的地方。因为，很多解决方案中没有考虑到可访问性。

多种解决方案
有多种解决方案可以使文本更易于阅读。我们逐一看看

如上图所示，针对此问题有不同的解决方案。需要注意的是渐变的解决方案。为什么？因为这种方案容易让文本失去可以访问性。

解决方案
The Gradient Overlay(渐变叠加)
一般而言，渐变叠加是让图像上的文字更加清晰的最常见解决方案，所以，我们重点来看看。

实现渐变叠加时，有两种方式：
1,使用单独的元素进行渐变伪元素或空的< div >
2,应用渐变作为背景图像。

.card__content {position: absolute;/* other styles (left, top, right, and padding) */background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

乍一看，你可能会认为渐变效果很好，这是不够全面的。如果用更多样的图片测试了同样的渐变效果，结果如下：

白色文本和图像之间的对比度并不总是很清晰。对于某些人来说，可以接受，但是使用这种渐变是一个巨大的错误，因为文字无法访问。
原因是该渐变在垂直方向上应覆盖更多的空间，因此它的高度需要更大。渐变等于内容的大小在所有情况下都无法使用。为了解决这个问题，我们可以使用min-height，如下所示：
.card__content元素的min-height
Flexbox 将内容推到底部。

.card__content {position: absolute;/* other styles (left, top, right, and padding) */display: flex;flex-direction: column;justify-content: flex-end;background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

另一种解决方案是仅使用padding-top 来代替min-height和flexbox。

.card__content {position: absolute;padding-top: 60px;background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

请注意左卡和右卡之间的差异，渐变高度较大。

css处理图片上的文字(内阴影)相关推荐

CSS实现背景透明而背景上的文字不透明
在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...
css图片上漂浮着文字效果
1.效果: 2.html代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <H ...
html和css的图片怎么加,html+css如何在图片上添加文字
html+css如何在图片上添加文字 2018-09-14 效果如图思路:div相对定位. 图片默认定位, 文字绝对定位参考代码 html> /*div1下面包含着1个图片和1段文字*/ ...
图片上的文字用CSS写出毛玻璃效果
图片上的文字用CSS写出毛玻璃效果 2016-10-04 08:11 网页设计标签:css 1297 发表评论半透明颜色最初的使用场景之一就是作为背景.将其叠放在照片类或其他 ...
HTML CSS 个人注册界面实现边框上加文字
实例:制作个人注册界面效果: HTML CSS 代码实现: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
在css的框中打文字,css 边框上如何写入文字？
方法一: 1.首先,打开html编辑器,新建html文件,例如:index.html. 2.在index.html中的标签中,输入html代码:. 文字 3.浏览器运行index.html页面,此时 ...
CSS实现背景图毛玻璃效果和如何保持图片上的文字显示正常
说明因为我的底子特别的差(大佬勿喷),今天想让文字在图片上方显示,并且给图片模糊,结果当图片模糊之后也就是实现毛玻璃效果后,发现图片上的文字也模糊掉了,这个问题当然可以用伪元素的方式解决,但是由于某 ...
html图片左侧现实文字,css 关于图片上显示文字
图片上显示文字,现在有很多主流的方法,最常用的就是position设置为relative或者absolute. 本文带来了一种新的实现方式:采用height为0+overflow为visible的方式 ...
CSS|如何在页面上为文字添加艺术效果
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 问题描述我们在使用word编辑文档时,经常会用到艺术字.插入 ...

css处理图片上的文字(内阴影)

css处理图片上的文字(内阴影)

css处理图片上的文字(内阴影)相关推荐

最新文章

热门文章