背景色为半透明的例子

效果图

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>rgba</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

</head>

<style type="text/css">

    .content{

        height:300px;

        width: 600px;

        margin-top:-290px;

        margin-right: auto;

        margin-left: auto;

        background-color: #FFF0F5;

        z-index: 1;/*z值越大，越在上面*/
}

    .border{

        height: 300px;

        margin-left: auto;

        margin-right: auto;

        width: 620px;

        margin-top: 60px;

        background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);/*关键代码，透明度*/

        z-index: 0;/*0为最下面的这一层，显示最下面*/

    }

    body{

        background-color: #EDEDED3;

    }

</style>

<body>3

     <!--透明边框 -->

    <div class="border"></div>

    <!-- 主要内容 -->

    <div class="content"></div>

</body>

</html>

背景色为半透明的例子,布布扣,bubuko.com

时间： 2024-12-27 09:07:35

背景色为半透明的例子的相关文章

使用duilib开发半透明异形窗体程序（附源码和demo）

转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/43532791 半透明异形窗体的功能在之前维护的老版本的duilib里面已经有了基本的功能,但是因为一直存在较多的缺陷,所以我一直建议少用,就连我自己写仿酷狗项目也只是在几个小地方用了半透明异形窗体.不过今天在群里和其他几位朋友讨论后,发现了之前的许多问题以及解决方法.所以我立马修复了当前的库,并且写了一个半透明异形窗体的demo来测试效果.这里的半透明窗体是用Updat

CSS实现文字半透明显示在图片上方法

CSS实现文字半透明显示在图片上方法在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在图片的底部,用来说明图片的内容,当作图片标题,标题文字和背景可以设置半透明,鼠标经过图片时边框换色. 代码预览代码如下复制代码 <head> <meta http-equiv="Content-Type" content="text/html; charse

JavaScript的DOM操作（二）

一:window.history对象历史记录,通过历史记录可以操作页面前进或者后退 window.history.back();后退 window.history.forward();前进 window.history.go(n); n是正数代表前进n个页面,n是负数代表后退n个页面. 二:window.location对象 location地址栏 var s = window.location.href;获取当前页面的地址 window.location.href="http://www.b

[android] 轮播图-滑动图片标题焦点

谷歌提供的v4包,ViewPager 在布局文件中,先添加<android.support.v4.view.ViewPager/>控件,这个只是轮播的区域在布局文件中,布置标题描述部分线性布局,竖向排列,背景色黑色半透明,这个布局和上面的ViewPager底部对齐layout_alignBottom=”@id/xxx” <TextView/>居中显示, 小点部分,先放过空的LinearLayout,id是ll_points在代码中对其进行填充获取ViewPager对象调用V

HUD总结

HUD 指示器/HUD/遮盖/蒙板半透明的指示器如何实现指示器的alpha = 1.0; 指示器的背景色是半透明的 1. 创建颜色直接创建对应的颜色 + (UIColor *)blackColor; // 0.0 white + (UIColor *)darkGrayColor; // 0.333 white + (UIColor *)lightGrayColor; // 0.667 white + (UIColor *)whiteColor; // 1.0 white + (UIColo

Html2canvas - 项目中遇到的那些坑点汇总(更新中...)

水平居中的元素截图后向左跑偏明明是水平居中的代码,截图出来的会偏左,结构是左图片右文字,有时候是图片自己跑到最左边,有时候是整体偏左一点点这个问题也不是经常遇到,场景是父div元素text-align=center;内部两个子元素设为display:inline-block的模式.然后画图就会出现左边的div偏左靠或直接在左边的情况. 问题未解决,出现时也没研究因为啥,等有时间的时候就不出现了... 靠背景图露脸的dom们会有底线截图时,如果有一个dom元素是用背景图填充的,里边没有任何结

利用rgba和filter设置半透明背景色

在设置背景颜色半透明经常用CSS的rgba和filter,写法类似这样: background:rgba(5,7,12,0.9);filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#e505070c,endcolorstr=#e505070c)这种方式可以实现背景颜色半透明而不影响其子元素,能够兼容所以浏览器.那么问题来了,rgba转换成16进制色值比较麻烦,这个demo就是为了解决该问题,只要输入rgba值,就能够直

css 背景色半透明子元素不透明

方法一: 背景色用rgba表示兼容各个浏览器 ie8: 通过!important与filter:alpha(opacity=透明值)的结合使用即可解决:例如 background-color:#f9f1f1; background:rgba(249, 241, 241, 0.85) !important;filter:alpha(opacity=85). 方法二: 背景色用background-color:#000; 子元素放在父div外面的div,通过定位显示在父div上面: <div c

如何解决div背景色半透明，里面的图片不透明问题

用rgba可以实现,不能用opacity 背景做成透明的背景图,opacity属性影响子集的,除非把两者独立开~