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 条评论
登录 后参与评论

相关文章

来自专栏Django中文社区

自动生成文章摘要

博客文章的模型有一个 excerpt 字段,这个字段用于存储文章的摘要。目前为止,还只能在 Django Admin 后台手动为文章输入摘要。每次手动输入摘要比...

5658
来自专栏程序员互动联盟

小菜学Chromium之OpenGL学习之二

在这个教程里,我们一起来玩第一个OpenGL程序.它将显示一个空的OpenGL窗口,可以在窗口和全屏模式下切换,按ESC退出.它是我们以后应用程序的框架. 在C...

2996
来自专栏CDA数据分析师

【收藏】Excel中常用的十五招儿!

? 本文转自网络 1、快速填充公式 ? 2、最快求和 ? 3、对合并单元格求和 ? 4、设置列宽的3种方法 ? 5、以cm为单位设置行高列宽 ? 6、输入0开...

3496
来自专栏Fish

蓝桥杯 危险系数

题意就是求图中两点之间的割点的数目。 不知道被谁指导的说求割点可以用tarjan算法,就用了tarjan算法,但是tarjan算法求的是整个图的割点个数啊,至于...

2198
来自专栏nummy

Tkinter grid布局

Tkinter参考中最推荐使用的一个布局器。实现机制是将Widget逻辑上分割成表格,在指定的位置放置想要的Widget就可以了。

883
来自专栏何俊林

【独家】一种手机上实现屏幕录制成gif的方案

前言:一直以来,很多做apk演示效果时,通过图片的方式,总是没有看起来那样炫丽和灵动。如果能在手机上,直接通过录制屏幕,而变成gif。那可是省去了好多时间。进而...

2317
来自专栏debugeeker的专栏

《coredump问题原理探究》windows版6.2节有成员变量的类

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xuzhina/article/detai...

721
来自专栏Linux驱动

18.Llinux-触摸屏驱动(详解)

本节的触摸屏驱动也是使用之前的输入子系统 1.先来回忆之前第12节分析的输入子系统 其中输入子系统层次如下图所示, ? 其中事件处理层的函数都是通过input_...

4369
来自专栏Linux驱动

25.QT-模型视图

在Qt中,不管模型以什么结构组织数据,都必须为每个数据提供不同的索引值,使得视图能通过索引值访问模型中的具体数据

1192
来自专栏ATYUN订阅号

使用Matplotlib绘制图的常见问题和答案

Matplotlib是最受欢迎的二维图形库,但有时让你的图变得像你想象中好并不容易。

6543

扫码关注云+社区

领取腾讯云代金券