专栏首页WebDevelopercss的高级用法

css的高级用法

模糊背景图片(:before)

类似这样的效果

  • 之前

  • 之后

重点注意:颜色的变化,之后的图片相比之前的好像更暗淡一些

<div class="banner"></div>

banner放置类似上面的图片

.banner{
    width: 800px;
    height: 400px;
    position: relative;
    background: url(图片路径) no-repeat;
    background-size: cover;
}

.banner:before{
    content: ' ';
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(images/overlay.png);
    position: absolute;
    opacity: 0.5;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 这种div高度自适应确定你知道吗?

    _simple
  • 移动端滑动切换

    _simple
  • git常用命令

    _simple
  • Bootstrap响应式前端框架笔记十五——面板与井

        Bootstrap中的面板由pannel相关类来创建,一个完整的面板分为面板头部、面板体和面板注脚,并且Bootstrap中默认定义了一些面板风格,示例...

    珲少
  • QB 期刊 | 转录组层面上研究蛋白质-RNA相互作用的技术及方法综述

    两周前,小编给大家推荐了清华大学张强峰教授在QB期刊上发表的关于转录组层面上研究RNA-RNA相互作用的干湿实验方法的综述文章后,引起了许多小伙...

    生信宝典
  • 在TensorFlow+Keras环境下使用RoI池化一步步实现注意力机制

    在本文中,作者解释了感兴趣区域池化(RoI 池化)的基本概念和一般用法,以及如何使用它来实现注意力机制。他一步步给出了在 Keras 和 TensorFlow ...

    机器之心
  • 谷歌Flutter跨平台应用开发SDK,迎来首个发行预览版本

    Google 刚刚放出了自家 Flutter 跨平台移动应用开发 SDK 的首个发布预览版本(Release Preview 1),如果你是一位需要同时兼顾 i...

    BestSDK
  • teg 如何监控交换机负载

    方案一、自主开发不依赖开源监控系统的方案。(仅是个人设想的架构,架构不成熟,烦请指教)

    葫芦
  • TensorFlow全家桶的落地开花 | 2019 Google开发者日

    Android 10 原生支持 5G,Flutter 1.9、Dart 2.5 正式发布

    AI科技大本营
  • Spring Cloud 上手实战-架构解析及实作

    目前为止绝大部分的web应用软件采用单体应用,所有的应用的用户UI、业务逻辑、数据库访问都打包在一个应用程序上。

    用户5442762

扫码关注云+社区

领取腾讯云代金券