在背景图上面加滤镜层之后添加内容

实现步骤:

第一步,需要一个大容器让图片作为该容器的背景图片。

第二步,再在这个大容器中添加一个二级容器作为滤镜层(指定宽度,高度 ,背景色)

第三步,最后在二级容器中添加需要的的内容

<div class="first_big_bg">//大容器 添加背景

            <div class="second_lving">//二级容器  添加滤镜

                      <div class="myself_content_partial">//自己的内容
                                    //内容部分
                          <div/>
           </div>
</div>
时间: 2024-10-09 02:20:06

在背景图上面加滤镜层之后添加内容的相关文章

css 在背景图上加渐变

<html> <head> <title>我的第一个 HTML 页面</title> <style> .banner { width: 100%; background: linear-gradient(to right bottom,rgba(0,0,0,0.9),rgba(0,0,0,0)),url(2.jpg) no-repeat center; height: 300px; color:white; } .center{ width:12

用JavaScript实现CheckBox的全选取消反选,及遮罩层中添加内容

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c1 { 8 position: fixed; 9 top: 0; 10 right: 0; 11 left: 0; 12 bottom: 0; 13 background

IE6下 input 背景图滚动问题

ie6 背景图滚动问题: <title>ie6下input背景图滚动问题</title> <style> .box{ height:20px; width:300px; background:url(%E7%BB%83%E4%B9%A0%E8%A1%A8%E6%A0%BC/mon.jpg) no-repeat; background-color:#fcf; border:1px solid #069; } .box input{height:20px; width:30

#css3# 可以多背景图设置

今天无意发现css3可以多背景图设置,省去了多添加标签或伪类来创造,gooood,真是越来越智能,要紧跟是带你啊. #example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; } 前面url的图片会在上面层. 原文地址:https://www.cnblogs.co

JAVA实现二维码生成加背景图

pom.xml依赖 <!-- 二维码生成 -->         <!-- https://mvnrepository.com/artifact/com.google.zxing/core -->         <dependency>             <groupId>com.google.zxing</groupId>             <artifactId>core</artifactId>   

css实现背景图拉伸

制作页面时,有时需要在表格内插入背景图,我们可以使用CSS进行控制,代码: style="background-image:url(./images/counter_bg.jpg);background-repeat: no-repeat;background-position: right bottom;"其中,./images/counter_bg.jpg为显示图片路径. 如果现在需要实现背景图随表格拉伸而不重复的拉伸填充,如何实现?制作方法:建立表格,并在<table>

QT模态对话框用法(在UI文件中设置Widget背景图,这个图是一个带阴影边框的图片——酷)

QT弹出模态对话框做法: 1.新建UI文件时,一定要选择基类是QDialog的,我的选择是:Dialog without Buttons(),如下图: 2.然后在使用的时候: MyDialog dlg(this); dlg.exec(); 如果不加this,则会在任务管理器里面产生一个新的EXE. 3.如果对话框的标题是自定义,不想使用系统的标题,这时候需要在代码中加入: setWindowFlags(Qt::Dialog | Qt::FramelessWindowHint ); setAttr

iOS上用GPUImage给视频加滤镜

最近在做一个需要给已有视频加滤镜的app,不是实时滤镜,而是给已经存在的视频加滤镜. 虽然网上有很多关于GPUImage的博客,但大多都是给图片加上滤镜或者是直接在摄像头上加上的实时滤镜,找了很久之后..... 发现在github上本来就有..... 但是在网上找,却没有说很多人给出这样的滤镜教程,这里简单给分享一下下. 1. 首先,什么是GPUImage?详细请度娘之,简单点来说,就是一个用GPU来处理图片和视频的第三方库. 2. 给图像加滤镜,如果是只加滤镜,那么网上有很多的教程,这里就不细

清除css、javascript及背景图在浏览器中的缓存

在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的下载次数,获得更好的用户体验. 然而在版本升级或做一些css.js等调整的时候,缓存导致用户无法显示更新后的样式,这是另人头头疼的问题.除非用户自行手动升级缓存,不过几乎所有用户不会为了正常访问这个网站而去手动清除缓存,因为用户根本不知道是不是缓存的问题,而归根结底,用户就是认为你的页面存在问题,不