属性名: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. RHEL 6.5安装系统

    转自如下链接: http://www.jb51.net/os/128752.html

  2. CDN服务的含义

    CDN的全称是Content Delivery Network,即内容分发网络.CDN的基本原理是广泛采用各种缓存服务器,将这些缓存服务器分布到用户访问相对集中的地区或网络中,在用户访问网站时,利用全 ...

  3. 注册页面html版本

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. layui-入门

    1.下载layui 2.导入layui <title>开始使用layui</title> <!-- 导入js样式 --> <link rel="st ...

  5. Gitlab更改项目间的fork提交关系

    目录 一.前情提要 二.实际操作 一.前情提要 1.dzsw/cgd_xx项目,通过fork按钮在dzsw_dev组下面同步了一个项目 2.但是现在dzsw/cgd_xx项目因为没法提交合并请求,一点 ...

  6. CF499B Lecture 题解

    Content 有一个教授用 \(\texttt{A}\) 语言讲课.你觉得他讲的太快了,所以决定使用 \(\texttt{A}\) 语言和 \(\texttt{B}\) 语言记笔记. 已知 \(\t ...

  7. CF1092B Teams Forming 题解

    Content 有 \(n\) 个学生,每个学生有一个能力值 \(a_i\).现在想把学生两两分成一组,但是不能让每个组里面的学生能力值不相同,因此可以通过刷题来提升自己的能力值,每次解出一道题,能力 ...

  8. LuoguP7694 [COCI2009-2010#4] AUTORI 题解

    Content 科学论文会大量引用一些早期的著作,因此在一个论文中出现两种不同的命名约定并不少见.这两种不同的命名约定分别是: 长变体,由每个作者姓氏的完整单词由连字符连接而成,例如 Knuth-Mo ...

  9. CF1076B Divisor Subtraction 题解

    Content 给定一个数 \(n\),执行如下操作: 如果 \(n=0\) 结束操作. 找到 \(n\) 的最小质因子 \(d\). \(n\leftarrow n-d\) 并跳到操作 \(1\). ...

  10. TCP 长连接保活机制&HTTP长连接设置

    TCP KeepAlive Wireshark抓包分析机制 -------------------------------- 如上图所示,TCP保活报文总是成对出现,包括TCP保活探测报文和TCP保活 ...