探码开发文档
  • 探码科技-发开日志
  • 代码规范
  • 前端
    • Bootstrap 模板
      • 图表类
      • Profile 类页面
    • JS Chart图表
    • 图片库
    • Icon图标库
    • Css3
      • 字体+背景混合搭配
      • tranform-origin + transform
      • flex
        • 布局左边自适应,右边固定宽度
    • 用Sass颜色函数控制颜色
    • Draggable组件库
  • Javascript
  • Ruby
    • Ruby on Rails
      • 数据库类
      • 日志类
      • 价格字段的单位转换
      • 部署
      • 根据设备类型自动渲染页面
      • 路由
    • Gems
    • Automating your API with JSON Schema
    • 深度冻结变量 Deep Freeze
    • 搭建私有Gem仓库
    • YAML语法
  • 数据库
    • PostgreSQL
      • 基础知识
        • PostgreSQL中插入数据
        • PostgreSQL中更新数据
        • PostgreSQL中删除数据
      • 数据库管理
      • select jsonb
    • PostgreSQL XL
      • Data Definition
      • 查询技巧
  • Docker
    • Docker日志收集最佳实践
    • Harbor搭建私有镜像服务
  • Kubernetes
    • 参考资源
    • Kubeadm方式安装Kubernetes
    • Rancher方式安装Kubernetes
      • RBAC集成
    • rke方式安装Kubernetes
    • RBAC用户管理
    • Traefik配置
    • 创建etcd集群
    • Kubeapps
    • 工具
    • 安装Helm
    • 亲和度配置
  • 文件系统
    • GlusterFS
  • 日志管理
    • Fluentd
  • VirtualBox
  • 工具软件
    • Alfred
    • 代码版本控制工具
    • Atom
    • Bash Shell
    • Vim
    • fzf(Fuzzy Finder)
    • Gitlab
  • Ubuntu
    • 安装 VPN服务
    • 安装DNSMasq
    • Keepalived
    • OpenSSL 使用技巧
  • Git
  • Nginx
    • 自动更新SSL证书
    • 使用stream模块实现负载均衡
  • 机器学习
Powered by GitBook
On this page
  • 应用案例:
  • 字体+背景混合搭配
  • 扩展
  1. 前端
  2. Css3

字体+背景混合搭配

PreviousCss3Nexttranform-origin + transform

Last updated 6 years ago

应用案例:

字体+背景混合搭配

最终效果图:

HTML代码块:

<!-- html start -->
  <div class="tanmer__text__background animated fadeIn delay-2s" style="--image_url: url('./images/bg.jpg')">
    <h1 class="tanmer__text size__10">Hello World !</h1>
  </div>
<!-- end -->

CSS代码块:

<!-- animation css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

/* 可要可不要 */
html, body {
  height: 1000px;
  width: 100%;
} 

/* css start */
  .tanmer__text__background {
    width: 100%;
    height: 100%;
    background-color: white;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;

    position: relative;

    /* variable */
    background-image: var(--image_url)
  }

  .tanmer__text__background .tanmer__text {
    font-weight: bold;
    height: 100%;

    /* display flex */
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;

    /* 颜色混合,黑色透明 */
    mix-blend-mode: screen;

    /* variable params2 初始值 */
    font-size: var(--font_size, 5vw);
    background-color: var(--background_color, white);
    color: var(--color, black);
  }
/* end */

扩展

最终效果图:

HTML增加的代码块:

<!-- html start -->
  <div class="tanmer__text__background animated fadeIn delay-2s" style="--image_url: url('./images/bg.jpg')">
    <div class="tanmmer__position__mix__blend"></div>
    <h1 class="tanmer__text size__10">Hello World !</h1>
  </div>
<!-- end -->

CSS增加的代码块:

 /* tanmmer__position__mix__blend */
  .tanmer__text__background .tanmmer__position__mix__blend {
    position: absolute;
    width: 100%;
    height: 100%;

    /* variable params2 初始值 */
    mix-blend-mode: var(--mix_blend_mode, color-burn);
    background-color: var(--background_color, #03c9a9);
  }

结构

  • <div class="tanmer__text__background">

    • 描述:主要用于放置背景图片,使图片固定在页面中,不跟随滚动

    • 变量:在 style 属性中可以定义背景图片地址,例: --image_url: url('图片路径')

      • <div class="tanmmer__position__mix__blend" >

        • 描述:层级关系 图片 < 当前 < 文字, 搭配 mix-blend-mode 渲染文字颜色。

        • 变量:包含--mix-blend-mode(见参考文档)、--background-color,在 style 属性中进行赋值

      • <h1 class="tanmer__text" >

        • 描述:处理文字展示效果

        • 变量:包含 --font-size、--background-color、--color,在 style 属性中进行赋值

参考文档:

(mix-blend-mode youtube视屏)

(mix-blend-mode MDN文档)

https://www.youtube.com/watch?v=vs34f9FiHps&t=3783s
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
http://www.sodacan.cn/
http://www.0900.cc/
http://highgradelab.com/stash/branding-agency/