属性名: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基础 元素整体透明效果(包含内容+背景及子元素)的更多相关文章

  1. css基础语法二(常用文本与背景属性)

    [CSS常用文本属性] 1. 字体.字号类:① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal,7 ...

  2. 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存在影响

    原文地址 背景 开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当a标签内部存在嵌套时, 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存 ...

  3. html、css和js原生写一个模态弹出框,顺便解决父元素半透明子元素不透明效果

    模态框: html部分: <!-- 按钮 --> <button id="box" onclick="pop_box()">弹出框< ...

  4. jQuery编程基础精华02(属性、表单过滤器,元素的each,表单选择器,子元素过滤器(*),追加方法,节点,样式操作)

    属性.表单过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...

  5. QT下的几种透明效果(QPalette背景白色,窗口设置setWindowOpacity,QPainter使用Clear模式绘图)

    1.窗口整体透明,但是窗体上的控件不透明.    通过设置窗体的背景色来实现,将背景色设置为全透. QPalette pal = palette(); pal.setColor(QPalette::B ...

  6. 父元素高度设置为min-height,子元素高度设置为100%,但实际上子元素高度你知道是多少吗?

    前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...

  7. (转自MDN)CSS基础一定要看的包含块(containing block)

    之前在写<个人常用的水平居中方法>这篇文章的时候,百分比问题涉及到了包含块(containing block)这个概念. 今天刷面试题的时候,又看到了containing block这个词 ...

  8. 【CSS基础】实现 div 里的内容垂直水平居中

    方案一: 所有内容垂直水平居中 兼容性:IE8+. 条件:内容宽度和高度可以未知,可以是多行文字.图片.div. 描述:使用table-cell + vertical-align , html代码见文 ...

  9. 【WEB基础】HTML & CSS 基础入门(5)边框与背景

    前面(HTML图片) 漂亮的网页肯定少不了边框与背景的修饰,本篇笔记就是说明如何为网页上的元素设置边框或者背景(背景颜色和背景图片). 之前,先了解一下HTML中的图片元素,因为图片标签的使用非常简单 ...

随机推荐

  1. 多线程异步操作导致异步线程获取不到主线程的request信息

    org.springframework.web.context.request.RequestContextHolderorg.springframework.web.context.request. ...

  2. 3.Vue.js-目录结构

    Vue.js 目录结构 上一章节中我们使用了 npm 安装项目,我们在 IDE(Eclipse.Atom等) 中打开该目录,结构如下所示: 目录解析 目录/文件 说明 build 项目构建(webpa ...

  3. 05 - Vue3 UI Framework - Button 组件

    官网基本做好了,接下来开始做核心组件 返回阅读列表点击 这里 目录准备 在项目 src 目录下创建 lib 文件夹,用来存放所有的核心组件吧.然后再在 lib 文件夹下创建 Button.vue 文件 ...

  4. InnoDB学习(四)之RedoLog和UndoLog

    BinLog是MySQL Server层的日志,所有的MySQL存储引擎都支持BinLog.BinLog可以支持主从复制和数据恢复,但是对事务的ACID特性支持比较差.InnoDB存储引擎引入Redo ...

  5. MySQL常见错误总结

    一.1205 - Lock wait timeout exceeded; try restarting transaction

  6. [BUUCTF]REVERSE——Java逆向解密

    Java逆向解密 附件 步骤: 根据题目提示是java语言编写的程序,用jd-gui反编译一下 百度了一些java里的函数后读懂了这段程序的意思,将我们输入的字符串依次+'@',然后跟32异或,得到K ...

  7. C# ASP.NET WebApi 跨域设置

    概述 前后端分离开发模式,一定会遇到跨域的问题.这里收集了2种 C# Asp.Net webapi 相关的跨域解决方案,方便后续查找参考. 2021/10/28 更新: 有更加简单高效的方式推荐< ...

  8. 资源分配单位(Project)

    <Project2016 企业项目管理实践>张会斌 董方好 编著 那些分配了资源的任务,其中的资源是有数量单位的,默认工时单位是100%,材料单位是1. 比如某吃货,为了完成吃米饭这一任务 ...

  9. Docker从入门到精通(七)——容器数据共享

    什么是容器数据共享?简单来说就是容器与容器之间数据共享,容器与宿主机数据共享. 1.为什么需要数据共享? ①.数据持久化 比如我们有一个MySQL集群,通过容器启动,那么项目运行过程中的数据是保存在容 ...

  10. Python+Robot Framework实现UDS诊断自动化测试

    一.环境搭建 1.概述 由于项目需要进行UDS诊断测试,所以对这方面进行了研究学习,网上很少能查询到相关资料,故记录一下UDS自动化测试开发过程,由于保密原则,案例都是Demo,希望能帮到感兴趣的朋友 ...