`

纯Css 背景色透明，内容不透明之方法。

    博客分类：
  • css
css 
阅读更多

纯Css 背景色透明，内容不透明之方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body {background:url(http://www.google.com.hk/intl/zh-CN/images/logo_cn.png) 0 0 repeat;}

* {margin:0;padding:0;}

.Boxer {width:600px;height:400px;overflow:hidden;margin:0 auto;border:6px solid red;}

.Opacity {

        height:400px;

        background-color:rgba(0,0,0,0.5);  /*标准浏览器 只需这句*/

        background-color:#000\9;      /*IE 系列*/

        filter:alpha(opacity=50);     /*IE 系列*/

        /*

                作为透明背景的层，不可以有 position 属性，不知为何。。。

                。

                background-color:rgba(0,0,0,0.5) 这句，IE6貌似能读懂一小部分，我艹了。所以只能将background-color:#000 写在其后，然后加个IE的专有Hack。

                不信可以写一个试试看

                background-color:#000;background-color:rgba(0,0,0,0.5);filter:alpha(opacity=50);

                IE6会让你蛋疼的！

        */

        }

.BoxerInner {position:relative;  /*IE 系列*/

text-align:center;font-size:24px;font-weight:700;color:yellow;}

</style>
</head>
<body>
<p style="font-size:60px;color:#000;text-align:center;padding:20px;font-weight:700;">Css:背景色透明，内容不透明之终极方法！兼容，终极。</p>

<div class="Boxer">
        <div class="Opacity">
                <div class="BoxerInner">BoxerInner</div>

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

分享到：
| jBreadCrumb插件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css背景色透明 内容不透明的解决方法(兼容所有浏览器)

    总结来说，要实现CSS背景色透明，内容不透明的效果，可以结合使用`rgba()`和`filter`，并针对不同浏览器添加相应的前缀。通过合理布局和定位，可以创建出美观且具有良好兼容性的网页设计。在编写CSS时，记得始终关注...

    Css如何实现背景色透明或半透明但内容不透明

    在网页设计中，有时我们希望元素的背景颜色呈现透明或...总的来说，通过合理利用CSS的`filter`滤镜和`rgba()`函数，我们可以轻松实现背景色透明或半透明但内容不透明的效果，从而提升网页设计的视觉层次感和用户体验。

    纯CSS实现背景半透明文字不透明效果兼容IE6

    实现这样的效果在现代浏览器中相对简单，只需使用CSS中的rgba或opacity属性来调整背景色的透明度，以及文字的透明度。 但是，对于需要兼容老旧浏览器（如IE6）的情况，问题就变得复杂起来，因为老旧浏览器不支持...

    纯css实现背景图片半透明内容不透明的方法

    此外，还有一种方法，通过为父级容器添加背景图片，然后设置该容器的透明度（例如，通过`rgba`函数设置背景色的透明度），在内部容器放置内容。示例代码如下： ```css .bg { background-image: url(images/love....

    css背景颜色透明背景图片切换效果

    在本主题中，“css背景颜色透明背景图片切换效果”涉及的是如何利用CSS实现一种动态效果，即当用户交互时，网页背景颜色逐渐变为透明，并同时切换到不同的背景图片。这种效果可以增加用户体验的趣味性和互动性，常被...

    css实现背景半透明文字不透明的效果示例

    总结来说，通过CSS的`rgba()`函数和合理的颜色搭配，我们可以轻松实现背景半透明而文字不透明的效果。在实际应用中，可以根据需求调整颜色值和透明度，以适应不同的设计风格和品牌要求。同时，保持良好的代码习惯，...

    纯CSS3背景透明的Speech Bubbles对话气泡

    在CSS3中，可以使用`rgba()`颜色函数来创建带有透明度的背景色。`rgba()`语法是`rgba(red, green, blue, alpha)`，其中`red`, `green`, `blue`分别代表红、绿、蓝三原色的强度，取值范围为0到255；`alpha`则是透明度...

    CSS3实现背景透明文字不透明的示例代码

    在CSS3中，实现背景透明而文字不透明的效果有多种方法。这里我们将详细探讨如何通过修改示例代码来实现这一目的。首先，我们要明白CSS3引入的新特性，如`rgba()`函数和`background-color`的透明度控制，可以帮助我们...

    css3半透明遮罩背景lightbox图片展示特效

    在“css3半透明遮罩背景lightbox图片展示特效”中，我们主要关注的是如何使用CSS3来创建具有半透明遮罩和动态效果的图片展示组件，通常被称为Lightbox。Lightbox是一种流行的设计模式，当用户点击图片预览链接时，会...

    解决IE6下PNG图片背景色不透明问题的方法

    本文将详细介绍如何解决IE6下的PNG图片背景色不透明问题。 首先，理解问题的原因至关重要。IE6不完全支持PNG8和PNG24这两种PNG格式。特别是PNG24，它包含了24位颜色和一个alpha通道，用于实现半透明效果，但IE6只能...

    CSS实现背景透明文字不透明兼容各种浏览器有图有真相

    本文将介绍如何使用CSS来实现背景透明、文字不透明，并且兼容包括IE6在内的各种主流浏览器。 首先，我们来看一下基本的CSS语法。在现代浏览器中，我们可以利用`rgba()`函数来设置元素的背景透明度。`rgba()`函数...

    ie7+背景透明文字不透明超级简单的实现方法

    在网页设计中，有时我们需要实现背景透明但...总的来说，通过使用PNG32格式的透明图片和适当的CSS样式，我们可以轻松地在IE7+浏览器中实现背景透明而文字不透明的效果。这种方法既简单又实用，适用于多种网页设计场景。

    CSS实现半透明效果

    在这个例子中，背景色被设置为半透明的白色，`rgba(255, 255, 255, 0.5)`中的最后一个参数0.5表示透明度。 另外，从CSS3开始，还引入了`filter`属性，可以实现更高级的透明效果，例如模糊（blur）、灰度（grayscale...

    css半透明效果

    例如，创建一个背景色为半透明红色的元素： ```css .element { background-color: rgba(255, 0, 0, 0.5); } ``` 这里的`rgba(255, 0, 0, 0.5)`中，`(255, 0, 0)`是红色的RGB值，`0.5`是透明度，0.5表示50%透明。 ...

    CSS透明度定义

    /* 设置背景色为半透明红色 */ } ``` 2. **使用背景图片**：如果只需要对背景图片进行透明处理，可以将图片设置为半透明并作为元素的背景。 ```css .bg-image-element { background-image: url('path/to/...

    解决ie6下透明图片不透明问题

    这个库的工作原理是检测浏览器类型，如果检测到是IE6，它会为页面上的所有PNG图片应用特定的样式和脚本，通过动态修改元素的背景图像和滤镜属性，来达到透明效果。 使用DD_belatedPNG库时，通常需要在HTML文档的...

    ios输入框（input）背景色为白色无法去除.pdf

    使用CSS样式可以使得输入框背景色变得透明，并消除iOS存在的输入框不透明问题。第一段代码使得选择历史记录中的值后，输入框背景色不会改变。第二段代码消除iOS存在的输入框不透明问题，通过设置-webkit-appearance:...

    纯CSS3实现DIV高亮显示特效

    例如，当鼠标悬停在`div`上时，我们可以使用`:hover`来改变其背景色，实现高亮效果。 2. **过渡（Transition）**：过渡效果允许我们平滑地改变一个或多个CSS属性。通过指定开始状态和结束状态，以及过渡的持续时间...

Magicbox
Global site tag (gtag.js) - Google Analytics