<!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. Linux 内核 标准 PCI 配置寄存器

    一些 PCI 配置寄存器是要求的, 一些是可选的. 每个 PCI 设备必须包含有意 义的值在被要求的寄存器中, 而可选寄存器的内容依赖外设的实际功能. 可选的字段不被 使用, 除非被要求的字段的内容指 ...

  2. 【t044】弗洛伊德

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 弗洛伊德是一个大牛!给一个有向图G,他有n个结点,现在请你求出对于他的每一对结点(x,y),从x出发走 ...

  3. 大数据vs计算机

    大数据有两个方向,一个是偏计算机的,另一个是偏经济的.你学过Java,所以你可以偏将计算机 基础1. 读书<Introduction to Data Mining>,这本书很浅显易懂,没有 ...

  4. Popup a window before the MainWindow

    protected override void OnStartup(StartupEventArgs e) { Window w = new Window(); w.ShowDialog(); bas ...

  5. UI自动化测试框架 ---TestCafe

    UI自动化测试框架 ---TestCafe 官网文档链接: https://devexpress.github.io/testcafe/ https://devexpress.github.io/te ...

  6. 37.html

    转载:https://www.cnblogs.com/yuanchenqi/articles/5976755.html 前端概述 import socket def main(): sock = so ...

  7. Java中的循环结构

    1.while循环结构 语法: while(循环条件){ //循环操作 } while循环结构流程图: 举例: int i = 1; while(i <= 100){ System.out.pr ...

  8. Pycharm学生版安装教程（2019-12月更新）

    以下方法全部是官方渠道正版激活,可选择学生版(免费) 或企业版(付费) 我的机器学习教程「美团」算法工程师带你入门机器学习  以及 「三分钟系列」数据结构与算法  已经开始更新了,欢迎大家订阅~这篇专 ...

  9. SpringBoot系列——启用https

    前言 有时候我们需要使用https安全协议,本文记录在SpringBoot项目启用https 生成证书 自签名证书 使用java jdk自带的生成SSL证书的工具keytool生成自己的证书 1.打开 ...

  10. nginx部署vue跨域proxy方式

    server { listen 80; charset utf-8; #server_name localhost; server_name you_h5_name; ###VUE项目H5域名 err ...