1. 事件穿透属性：pointer-events: none  // auto默认值、none：不捕捉target事件（实现穿透）

用途：当需要使用透明遮罩并且允许点击遮罩下方元素时，或需要使用背景容器展示样式时
 
2. 背景图不跟随滚动条：
　　background-image: url('xxx');
        background-size: 100% 100%;
        background-attachment: fixed;  // 不跟随滚动条属性设置
 
用途：背景图不需要决定定位
 
 
我的个人站点：https://www.devloper.top  有大量视频与技术博客

CSS实现事件穿透与背景图不跟随滚动条的更多相关文章

  1. 在css中设置图片的背景图，怎么设置图片纵向拉伸

    css中设置背景图拉伸填充,在css2.1之前这个背景的长宽值是不能被修改的. 实际的结果是只能重复显示,可以使用repeat,repeat-x,repeat-y,no-repeat这些属性来控制背景 ...

  2. CSS之全屏背景图

    吐槽啦:Yeah  明天就是国庆了o(*￣▽￣*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...

  3. css背景图与html插入img的区别

    一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别: 1. css中的 ...

  4. vue的挖坑和爬坑之css背景图样式终极解决方法

    原问题 #wrapper{ width:100%; height:100%; position:fixed; background-image:url(./img/open_bg.jpg) } 在.v ...

  5. 遭遇input与button按钮背景图失效不显示的解决办法

    笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...

  6. 使用Canvas绘制背景图

    原文  http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...

  7. input与button按钮背景图失效不显示的解决办法

    今天做公司的某个网站前端网页页面的时候笔者又遇到了难解决的网页前端DIVCSS代码问题,一个平时不会发生的怪事情发生了:为网页代码中的Form表单中的input 和 button 按钮标签在CSS样式 ...

  8. 冒泡，setinterval，背景图的div绑定事件，匿名函数问题

    1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b" ...

  9. CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（1）设定背景图

    技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点 ...

随机推荐

  1. 【LeetCode】127. Word Ladder 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/word-lad ...

  2. Feign动态调用，结合Ribbon

    代码如下,三种方法: import org.springframework.beans.factory.annotation.Autowired;import org.springframework. ...

  3. 图像处理opencv-Rect 排序、合并[转]

    opencv进行rect检测时,当检测到多个rect,组成rect vector之后,有些rect是由一个区域误分割得到的, 可以按照某种规格将这些rect合并为一个rect.比如按照x,y,widt ...

  4. HTMl+CSS 模仿京东网登录页面

    课后实践项目,仅页面效果,写博客纯属记录! 码云开源仓库地址:https://gitee.com/ynavc/jd 演示地址:https://ynavc.gitee.io/jd 效果图: 实现代码: ...

  5. 「会员卡管理系统」 · Java Swing + MySQL JDBC开发

    目录 目录 一.语言和环境 二.实现功能 三.数据库设计 四.具体要求及推荐实现步骤 五.注意事项 六.评分标准 >>>实现代码: 数据库 com.ynavc.Bean com.yn ...

  6. WiFi6模块 RW6852-PCIE

    RW6852-PCIE是一款高度集成的模块,支持2T2R 802.11ax解决方案,具有MU-MIMO.无线LAN (WLAN) PCI Express网络接口控制器和HS-UART混合接口.它结合了 ...

  7. playwright--自动化（二）：过滑块验证码 验证码缺口识别

    前两天需要自动化登录一个商城的后台 用的是playwright 没有用selenium 中间出了一个滑块验证 现阶段playwright教程不是太多,自己做移动的时候各种找,费劲巴拉的.现在自己整出来 ...

  8. RabbitMQ基础教程系列

    Ubuntu16.04下,erlang安装和rabbitmq安装步骤 Ubuntu16.04下,rabbimq集群搭建 C# .net 环境下使用rabbitmq消息队列 .net core使用rab ...

  9. 基于node和npm的命令行工具——tive-cli

    前端开发过程中经常会用到各种各样的脚手架工具.npm全局工具包等命令行工具,如:Vue脚手架@vue/cli.React脚手架create-react-app.node进程守卫工具pm2.本地静态服务 ...

  10. 游戏中的自动寻路-A*算法（第一版优化——走斜线篇）

    一.简述以及地图 G 表示从起点移动到网格上指定方格的移动距离 (暂时不考虑沿斜向移动,只考虑上下左右移动). H 表示从指定的方格移动到终点的预计移动距离,只计算直线距离,走直角篇走的是直角路线. ...