<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>透明度</title>

    <style>

        .c1{

            height: 100px;

            width: 100px;

            background-color: brown;

            color: darkorange;

            opacity: 0.5;

        }

        .c2 {

            height: 150px;

            width: 150px;

            background-color: blueviolet;

            color: rgba(0,123, 211, 0.6);

        }

    </style>

</head>

<body>

<div class="c1">Hello World1</div>

<div class="c2">Hello World!</div>

</body>

</html>

opacity

值 0~1

及改变背景也改变标签里的内容

rbga()

只改变背景

css 透明度的更多相关文章

  1. css的img移上去边框效果及CSS透明度

    css的img移上去边框效果: .v_comment img{ height:36px; height:36px; float:left; padding:1px; margin:2px; borde ...

  2. CSS透明度大汇总

    近年来,CSS不透明算得上是一种相当流行的技术,但在跨浏览器支持上,对于开发者来说,可以说是一件令人头疼的事情.目前还没有一个通用方法,以确保透明度设置可以在目前使用的所有浏览器上有效. 这篇汇总主要 ...

  3. 【总结】CSS透明度大汇总

    近年来,CSS不透明算得上是一种相当流行的技术,但在跨浏览器支持上,对于开发者来说,可以说是一件令人头疼的事情.目前还没有一个通用方法,以确保透明度设置可以在目前使用的所有浏览器上有效. 这篇汇总主要 ...

  4. 使用JavaScript设置和改变CSS透明度

    在Firefox, Safari, Chrome和Opera下的CSS透明度#myElement {opacity: .7;}IE下的CSS透明度IE下照旧有别于其他浏览器,并且目前也有三个不同版本的 ...

  5. css透明度的一些兼容测试

    前言 网站丢给了外包公司来弄,但是老外写css的时候似乎没有考虑到国内的浏览器市场,于是只用了opacity这个属性来写,当IE8-的浏览器访问的时候,浮动层就像一块大黑斑药膏贴在哪里.很显然,婀娜多 ...

  6. css透明度的设置

    Css代码 .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: ...

  7. css透明度、毛玻璃效果

    透明度: 1.opacity    背景颜色和字体同时透明 2.background:rgba(255,255,255,0.2);   只是背景颜色透明,字体不透明 代码: .info{ backgr ...

  8. 第二季第十一天 html5语义化标签 css透明度

    span不能设置宽高背景 HTML5语义化标签 <section>标签所包裹的是有一组相似的主题的内容,可以用这个标签来实现文章的章节.标签式对话框中的各种标签页等类似的功能. <s ...

  9. css透明度的兼容！！！

    以前总是写透明度的代码,今天弄了个弹出框要求就边框透明,于是有了下边的结论,虽然很多东西不合理了,日后找到更合理在做更新!!! html <div class="new_playerf ...

  10. Css透明度

    全透明代码:{background:transparent} 半透明代码:{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !importan ...

随机推荐

  1. 剑指 Offer —— 数组中重复的数字

    数组中的重复数字 题目描述 牛课网链接 长度为 n 的数组里,所有数字都在 0 到 n-1 的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重复几次.请找出数组中任意一 ...

  2. linux 系统挂起

    尽管内核代码的大部分 bug 以 oops 消息结束, 有时候它们可能完全挂起系统. 如果系 统挂起, 没有消息打印. 例如, 如果代码进入一个无限循环, 内核停止调度,[15]15 并且系 统不会响 ...

  3. cmd 如何跨驱动器移动文件夹

    如果在命令行或 cmd 批处理文件通过 move 移动文件夹的时候,移动的文件夹是跨驱动器的,那么将会显示拒绝访问 解决通过 move 移动文件夹到不同的驱动器需要通过先复制文件夹到另一个驱动器,然后 ...

  4. vue面试的一些总结

    vue中组件的data为什么是一个函数? 组件是可复用的vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data数据都应该是相互隔离,互不影响的,基于这一理念 ...

  5. 天使玩偶/SJY摆棋子

    P4169 [Violet]天使玩偶/SJY摆棋子 CDQ分治的题目. 我们发现题目要我们求的\(|A_x-B_x|+|A_y-B_y|\)的绝对值号比较恶心. 试想一下怎么去掉 如果所有的点都在我们 ...

  6. Codeforces 293E 点分治+cdq

    Codeforces 293E 传送门:https://codeforces.com/contest/293/problem/E 题意: 给你一颗边权一开始为0的树,然后给你n-1次操作,每次给边加上 ...

  7. java日志学习（持续更新）

    1.Java实现日志 java日志体系大体可以分为三个部分:日志门面接口.桥接器.日志框架具体实现.原生日志实现(http://www.importnew.com/16331.html) Java日志 ...

  8. Linux基础：认识Linux

    1.Linux操作系统的特点 优点 ​ (1)可靠性高:linux是基于Unix的概念开发出来的系统,拥有Unix的稳定且效率的特点.运行一年以上而不曾宕机.不必关机是很平常的事情 : ​ (2)彻底 ...

  9. 利用docker容器运行.net core webapi

    利用docker容器运行.net core webapi :first-child { margin-top: 0 !important; } > :last-child { margin-bo ...

  10. TCP/IP Basic

    1.概述 TCP/IP起源于60年代美国政府遮住的一个分组交换网络项目,在当今被定义为互联网通信接口,TCP/IP主要分为4层,每一层负责不同的通信功能,这促成了一个协议族的诞生,而TCP/IP是一组 ...