文字剪切图片"/>
文字剪切图片
重点
1、/* 对图片进行剪切，保留原始比例 */
object-fit: cover;
参考 文档
2、/* mix-blend-mode 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。相当于修改ps的混合模式 */
mix-blend-mode: screen;
参考文档
有关mix-blend-mode 属性，这篇文章写的很细
完整代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>body {display: flex;height: 100vh;justify-content: center;align-items: center;margin: 0;padding: 0;}.bg_img {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 700px;height: 700px;margin: 0;/* 对图片进行剪切，保留原始比例 */object-fit: cover;}.title {width: 700px;height: 700px;font-size: 68px;font-weight: 700;text-align: center;line-height: 700px;/* 文字转大写 */text-transform: uppercase;background: white;/* mix-blend-mode 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。相当于修改ps的混合模式 */mix-blend-mode: screen;}</style><title>文本剪切图片</title>
</head><body><img src=".jpg" alt="" class="bg_img" /><h1 class="title">cherry blossoms</h1>
</body></html>
更多推荐
文字剪切图片
发布评论