css3基础 rgba 背景半透明 简单示例

礼悟:
     公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
          虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。


               ide:visual studio 2017  
            browser:Chrome
                     os:win7

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="author" content="https://www.cnblogs.com/jizuiku"/>
    <title></title>
    <style type="text/css">
        body {
            background-image: url("../images/person.jpg");
            background-repeat: no-repeat;
        }

        div {
            height: 100px;
            width: 200px;
            background-color: rgba(255,255,255,0.5);
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

效果



CSS3优秀,值得学习。
学习资源: www.w3cschool.cn + itcast和itheima视频库 + 清净的心地。
如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。

原文地址:https://www.cnblogs.com/jizuiku/p/8440499.html

时间: 2024-08-03 04:48:16

css3基础 rgba 背景半透明 简单示例的相关文章

css3基础 :nth-child(3n+1) 简单示例

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

CSS3绘制圆角矩形的简单示例

随着网络的发展,CSS 也在不断的完善,充分吸取多年来 Web 发展的需求,提出了很多新颖的 CSS 特性,例如很受欢迎的圆角矩形 border-radius 属性,但很可惜,此属性目前没有得到任何浏览器的支持. 对于一些浏览器,它们有其私有的圆角属性.如 FF 的 -moz-border-radius ,Safari 和 Chrome 的 -webkit-border-radius .效果见下图: FF 的圆角Safari 和 Chrome 的圆角(Safari 和 Chrome 使用的是同一

css3基础 background-size 背景缩放

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

Python3基础 内嵌函数 简单示例

? ???????Python : 3.7.0 ?????????OS : Ubuntu 18.04.1 LTS ????????IDE : PyCharm 2018.2.4 ??????Conda : 4.5.11 ???typesetting : Markdown ? code """ @Author : 行初心 @Date : 18-9-24 @Blog : www.cnblogs.com/xingchuxin @Gitee : gitee.com/zhichengji

Python3基础 生成器推导式 简单示例

? ???????Python : 3.7.0 ?????????OS : Ubuntu 18.04.1 LTS ????????IDE : PyCharm 2018.2.4 ??????Conda : 4.5.11 ???typesetting : Markdown ? code """ @Author : 行初心 @Date : 18-9-24 @Blog : www.cnblogs.com/xingchuxin @Gitee : gitee.com/zhichengji

Bootstrap3基础 navbar 导航条 简单示例

? 内容 参数 ??OS ??Windows 10 x64 ??browser ??Firefox 65.0.2 ??framework?? ??Bootstrap 3.3.7 ??editor ??Visual Studio Code 1.32.1?? ??typesetting ??Markdown ? code <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="U

JavaSE8基础 构造代码块简单示例

os :windows7 x64    jdk:jdk-8u131-windows-x64    ide:Eclipse Oxygen Release (4.7.0) 代码: class Test { //在类中的成员位置,多个构造函数的公共代码放在这里面 { //构造代码块中 //对象进行初始化 会调用 System.out.println("调用构造函数时,构造代码块中的代码先执行"); } public Test() { System.out.println("无参数构

JavaSE8基础 静态代码块 简单示例

os :windows7 x64    jdk:jdk-8u131-windows-x64    ide:Eclipse Oxygen Release (4.7.0) 代码: class Test { /* * 在类中的成员位置,要用static修饰 * 可以对类进行初始化,而不是对对象进行初始化.在对象未有之前,他已存在. * 只执行一次 */ static{ //静态代码块中 System.out.println("静态代码块中的代码先执行,且只会执行一次"); } public

Bootstrap3基础 pagination 分页按钮 简单示例

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Firefox / Chrome   bootstrap:3.3.7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu