CSS基础 元素整体透明效果(包含内容+背景及子元素)
属性名:opacity:数字+px; 数字值取值0-1之间数字
数字值:1表示完全不透明
0表示完全透明
使用后效果
html结构代码
<div class="box">
<img src="./images/code.jpg" alt="">
</div CSS结构代码
<style>
.box{
width: 400px;
height: 400px;
background-color: red;
opacity: .5;
}
</style>
CSS基础 元素整体透明效果(包含内容+背景及子元素)的更多相关文章
- css基础语法二(常用文本与背景属性)
[CSS常用文本属性] 1. 字体.字号类:① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal,7 ...
- 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存在影响
原文地址 背景 开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当a标签内部存在嵌套时, 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存 ...
- html、css和js原生写一个模态弹出框,顺便解决父元素半透明子元素不透明效果
模态框: html部分: <!-- 按钮 --> <button id="box" onclick="pop_box()">弹出框< ...
- jQuery编程基础精华02(属性、表单过滤器,元素的each,表单选择器,子元素过滤器(*),追加方法,节点,样式操作)
属性.表单过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...
- QT下的几种透明效果(QPalette背景白色,窗口设置setWindowOpacity,QPainter使用Clear模式绘图)
1.窗口整体透明,但是窗体上的控件不透明. 通过设置窗体的背景色来实现,将背景色设置为全透. QPalette pal = palette(); pal.setColor(QPalette::B ...
- 父元素高度设置为min-height,子元素高度设置为100%,但实际上子元素高度你知道是多少吗?
前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...
- (转自MDN)CSS基础一定要看的包含块(containing block)
之前在写<个人常用的水平居中方法>这篇文章的时候,百分比问题涉及到了包含块(containing block)这个概念. 今天刷面试题的时候,又看到了containing block这个词 ...
- 【CSS基础】实现 div 里的内容垂直水平居中
方案一: 所有内容垂直水平居中 兼容性:IE8+. 条件:内容宽度和高度可以未知,可以是多行文字.图片.div. 描述:使用table-cell + vertical-align , html代码见文 ...
- 【WEB基础】HTML & CSS 基础入门(5)边框与背景
前面(HTML图片) 漂亮的网页肯定少不了边框与背景的修饰,本篇笔记就是说明如何为网页上的元素设置边框或者背景(背景颜色和背景图片). 之前,先了解一下HTML中的图片元素,因为图片标签的使用非常简单 ...
随机推荐
- 【Spring Framework】Spring入门教程(四)注册Bean到IOC容器
注册Bean到IOC容器大致分为4种: ①.包扫描+组件注解(@Controller.@Service.@Repository.@Component) 针对类是我们自己编写的情况 ②.@Bean注解 ...
- 【Java 基础】Java动态代理
Java动态代理InvocationHandler和Proxy java动态代理机制中有两个重要的类和接口InvocationHandler(接口)和Proxy(类),这一个类Proxy和接口Invo ...
- vue 键盘事件keyup/keydoen
使用: <!DOCTYPE html> <html> <head> <title></title> <meta charset=&qu ...
- I/O流之文件流
1.文件操作类 File 1.public File(String pathname)//给定一个要操作文件的完整路径 2.public File(File parent,String child)/ ...
- thinkphp引入PHPExcel类---thinkPHP类库扩展-----引入没有采用命名空间的类库
最近项目中遇到引入PHPExcel第三方类库 但是下载的phpExcel类没有命名空间,而且所有接口文件的命名都是以.php结尾 而不是tp中的.class.php 解决办法很简单:在引入没有采用命 ...
- UNCTF2020 pwn题目
YLBNB 用pwntools直接连接,然后接受就行. 1 from pwn import * 2 3 p = remote('45.158.33.12',8000) 4 context.log_le ...
- 5、双指针技巧套路框架——Go语言版
前情提示:Go语言学习者.本文参考https://labuladong.gitee.io/algo,代码自己参考抒写,若有不妥之处,感谢指正 关于golang算法文章,为了便于下载和整理,都已开源放在 ...
- 淘宝自动抢购, Webdriver浏览器常用的元素定位
https://www.cnblogs.com/diaosicai/p/5909660.html #!/usr/bin/env python ''' 作者:张铭达 功能:淘宝秒杀购物 版本:0.2 日 ...
- vue项目中Webpack-dev-server的proxy用法
问题:在VUE项目中,需要请求后台接口获取数据,这时往往会出现跨域问题 解决方法:在vue.config.js中devServer配置proxy 常用的场景 1. 请求/api/XXX现在都会代理到请 ...
- ajaxFileUpload上传文件成功后却无法解析服务器返回的json数据
可能是应该返回内容带了标签,过滤下 var index=data.indexOf("<"); if (index!=-1){ data=data.substring(0,in ...
