`
iaiai
  • 浏览: 2203522 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

css 设置元素背景为透明

 
阅读更多
要设置某一元素的背景为透明，在 chrome 、firefox、opera 下是这样的： 
background-color: rgba(0, 0, 0, 0.4);


rgba 中的最后一个参数 0.4 就是想要的透明度，范围在0～1之间。
在 ie 中一般是这样的： 
background-color: rgb(0, 0, 0);  
filter: alpha(opacity=40);


opacity 表示透明度，它的值范围在 0～100 之间

那么如何兼容各浏览器呢？只要把它们写在一起就行了。
由于 ie 不支持 rgba，所以会忽略之。其他浏览器对于自己不支持的，一般也会忽略。
下面来个示例：
HTML 代码： 
<body>  
    <div class="non-transparent">  
        aaaaa  
        </div>  
    </body>  
      
<div class="transparent">  
    <div class="box">  
        box  
        </div>  
    </div>


CSS 代码： 
.non-transparent:hover {  
    background-color: yellow;  
}  
  
.transparent {  
    position: absolute;  
    top: 0;  
    left: 0;  
      
    text-align: center;  
      
    width: 100%;  
    height: 100%;  
      
    filter: alpha(opacity=40);  
    background-color: rgb(0, 0, 0);  
      
    background-color: rgba(0, 0, 0, 0.4);  
}  
  
.box {  
    background-color: yellow;  
    width: 50%;  
    height: 50%;  
      
    position: relative;  
    left: 5%;  
    top: 10%;  
}


显示效果：

chrome:

firefox:

opera:

ie8:


另外，在 chrome、firefox、opera 中也可以这样:
opacity: 0.4;
但是这样的话，会把所有子元素的透明度也设置为同样的值，效果如下图：
  • 大小: 2.3 KB
  • 大小: 58.9 KB
  • 大小: 28.9 KB
  • 大小: 5.2 KB
  • 大小: 56 KB
分享到：
| jstl 标签
评论
发表评论

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

相关推荐

    CSS代码实现背景透明而文字不透明

    在网页设计中，有时我们希望实现背景透明但保持文字清晰可见的效果，这在CSS中可以通过多种方式实现。本文将详细讲解如何使用CSS代码来达到这一目标，并确保代码在火狐（Firefox）、360浏览器、谷歌（Chrome）以及IE...

    html+css透明背景

    但是，当为整个元素设置`opacity`时，该元素及其所有子元素都会受到此透明度的影响，包括内容。例如： ```css .box { background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */ opacity: 0.5; /* 全元素半...

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

    例如，我们可以为一个div元素定义一个背景颜色，并设置其透明度： ```css .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* 这里的最后一个...

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

    例如，将一个元素的背景颜色设为半透明红色： ```css element { background-color: red; opacity: 0.5; } ``` 背景图片的切换通常结合CSS的`background-image`属性和JavaScript实现。通过监听事件（如点击、滚动...

    css背景图片的背景裁切、背景透明度、背景变换等效果运用

    正如前面所说，仅仅依靠CSS现有的属性，我们无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果.为了实现这些效果，我们需要借助CSS的其他方法来实现，比如说CSS伪元素，他可以帮助我们模拟出这些CSS无法...

    CSS实现表单元素透明效果

    /* 或者改变背景透明度 */ background-color: rgba(255, 255, 255, 0.8); } ``` 对于表单按钮，我们可以用相同的方法调整透明度，但可能还需要考虑按钮的边框和文字颜色。使用`border-color`和`color`属性，配合`...

    css 背景半透明最佳实践

    为了解决子元素继承问题，可能需要为每个子元素单独设置`opacity`值，这会大大增加维护成本。 #### 三、最佳实践：使用`rgba`色彩 + `GradientFilter` 为了克服上述限制，推荐使用`rgba`色彩模型和`GradientFilter...

    CSS3模糊背景图片透明遮罩动画特效

    通过这些CSS3技术的组合应用，我们可以创建出具有动态模糊背景和透明遮罩效果的交互式网页元素，提升网站的视觉吸引力和用户体验。开发者可以根据需求调整参数，自定义动画速度、模糊程度、遮罩形状等，以满足各种...

    jquery css3带背景透明登录注册表单提交代码

    1. **透明度和 rgba()**：CSS3引入了`opacity`属性和rgba颜色值，可以实现元素的背景透明，为表单创造出半透明效果，提升设计感。 2. **边框动画**：如圆角边框`border-radius`、阴影`box-shadow`，以及过渡`...

    CSS透明度定义

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

    css半透明效果

    如果只想改变元素背景的透明度，而不影响子元素，我们可以使用`background-color`的RGBA值。RGBA是RGB颜色模型的扩展，多了个A（Alpha）通道，用于表示透明度。例如，创建一个背景色为半透明红色的元素： ```css ....

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

    对于Internet Explorer浏览器，由于它对CSS3透明度的支持有限，我们可以使用滤镜（filter）来实现背景透明。以下是一个例子： ```css .demo { background-color: transparent; /* 设置背景颜色为透明 */ filter: ...

    CSS3鼠标悬停图片半透明渐变颜色背景遮罩动画特效

    2. 使用CSS定义图片和遮罩的初始样式，例如设置遮罩的透明度为0，以便在未悬停时不可见。 ```css .image-container { position: relative; } .mask { position: absolute; top: 0; left: 0; width: 100%; ...

    css背景颜色透明-base.css-master.zip

    例如，如果你想要一个元素背景为半透明，你可以这样写： ```css .element { background-color: #ff0000; /* 假设这是你的背景颜色 */ opacity: 0.5; } ``` 这种方法会影响到元素内的所有内容，包括文字和其他...

    CSS视频教程设置网页背景

    在本节CSS视频教程中，我们将深入探讨如何设置网页背景，这是课程的第五部分，意味着在之前的内容中已经涵盖了基础知识。这节课的重点是利用CSS来美化网页，通过控制背景色、背景图片、背景重复和定位等属性，为网页...

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

    【CSS3库】是网页设计领域中的一个重要组成部分，它提供了许多...在实际应用中，开发人员会结合这些CSS3代码和图片资源，创建出独特的、背景透明的Speech Bubbles对话气泡效果，为用户提供更加生动和友好的网页体验。

    div+css设置div的背景为半透明的方法

    标题和描述中提到的知识点是如何使用CSS来设置div元素的背景为半透明效果。为了达到这一效果，可以使用CSS的不同属性来兼容不同的浏览器，因为不同浏览器的CSS支持程度存在差异。 在IE浏览器中，可以使用filter属性...

    CSS应用---透明圆角

    "CSS应用---透明圆角"这一主题聚焦于如何利用CSS实现元素的圆角以及透明效果。在现代Web开发中，这种效果广泛应用在按钮、卡片、图片框等各种界面元素上，为用户界面提供更加美观和友好的视觉体验。 首先，我们需要...

    css3水波纹混合背景元素动画特效

    在本文中，我们将深入探讨如何使用CSS3的`@keyframes`属性来创建一款独特的水波纹混合背景元素动画特效。这种特效通过模拟水滴落下的动态效果，为网页增添生动而引人入胜的视觉体验。 首先，让我们了解`@keyframes`...

    CSS背景颜色例子

    2. 跨元素背景颜色 如果你想让多个连续的元素共享相同的背景颜色，可以使用CSS的通用选择器`*`或类选择器`.class`。例如： ```css /* 设置所有元素的背景色 */ * { background-color: lightblue; } /* 或者针对...

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