属性名: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. Linux磁盘与文件系统原理

    这一章主要是原理性的,介绍了Linux文件系统的运作原理.涉及到很多计算机组成和操作系统的原理性知识,这部分知识很多都忘了,在这里复习下.    我们只看本章第1,2节.--------------- ...

  2. 2.8 rust 枚举与模式匹配

    Enums and Pattern Matching 摘要 枚举定义 enum IpAddrKind { V4, V6, } 枚举方法 fn main() { enum Message { Quit, ...

  3. References in C++

    When a variable is declared as reference, it becomes an alternative name for an existing variable. A ...

  4. maven的lifecycle

    1.maven clean. 清理项目的target目录 2.maven compile 编译项目 3.maven test 编译项目后,再执行Junit测试方法 4.maven package 编译 ...

  5. 使用JDBCTemplate执行DQL/DML语句

    package cn.itcast.datasource.jdbctemplate;import cn.itcast.domain.User;import cn.itcast.utils.JDBCUt ...

  6. 2.VUEJS-安装

    Vue.js 安装 1.独立版本 我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入. 2.使用 CDN 方法 以下推荐国外比较稳定的两个 ...

  7. 「Python实用秘技03」导出项目的极简环境依赖

    本文完整示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/PythonPracticalSkills 这是我的系列文章「Python实用秘技」的第3期 ...

  8. DevOps实战(Docker+Jenkins+Git)

    基于Docker+Jenkins+Git的CI/CD实战 与上一篇随笔:基于 Jenkins+Docker+Git 的CI流程初探 有所不同,该内容更偏向于实际业务的基础需求. 有几点需要注意: 该实 ...

  9. c++指针常量和常量指针概述

    个人理解,欢迎指正 这个简单,简单,简单(不要有心里压力:认为很难) 本文将会解决:  A.变与不变 B.判断指针常量和常量指针. C.常量指针指针常量.本文不涉及. 1.概述 A.指针: 说到底,还 ...

  10. 【LeetCode】1101. The Earliest Moment When Everyone Become Friends 解题报告 (C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 并查集 日期 题目地址:https://leetcod ...