CSS实现背景透明而背景上的文字图片不透明

1.用图片则能兼容IE8和IE7

2.用颜色则不能兼容IE8和IE7,并且颜色层不能随着内容层自增长，只能设置一个固定高度

3.用颜色则颜色层不能包含内容层（图片和文字）

1        <!-- wrap最外层设置position：relative -->
2    <div class="wrap">
3    <!-- bg为背景透明层 -->
4          <div class="bg"></div>
5        <!-- content内容层设置position：absolute -->
6          <div class="content"></div>
7    </div>

时间： 2024-12-13 02:32:34

CSS实现背景透明而背景上的文字图片不透明的相关文章

navigation和tabbar上的文字.图片自定义

[[UITabBarItem appearance] setTitleTextAttributes:@{ UITextAttributeTextColor : [UIColor blackColor],UITextAttributeFont:[UIFont fontWithName:@"Marion-Italic" size:14.0]} forState:UIControlStateNormal]; UIControState的设置: UIControlState

CSS实现背景透明而背景上的文字不透明

在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6下的BUG,但这也不困难,加上一段js处理就行了.但假如我们需要一个半透明遮罩的弹出层,如登陆框.注册框.提示等,这时可能需要整个页面都要被半透明的遮罩层覆盖,那么如用背景平铺的话,此时此刻也许就不是一个好办法了,图片大了会影响加载速度,图片小了同样会增加页面的渲染计算量,那么这时也许就需要用CSS滤镜了. 假如有这样一个例子:“有一个DIV块,此DIV是黑色

CSS实现背景透明而背景上的文字不透明完美解决

在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们需要一个半透明遮罩的弹出层,如登陆框.注册框.提示等,这时可能需要整个页面都要被半透明的遮罩层覆盖,那么如用背景平铺的话,此时此刻也许就不是一个好办法了,图片大了会影响加载速度,图片小了同样会增加页面的渲染计算量,那么这时也许就需要用CSS滤镜了. 假如有这样一个例子:“有一个DIV块,此DIV

CSS利用filter/opacity实现背景透明

设计师为了突出网页的层次感,往往会采用一些半透明的元素,但对于前端实现起来可不是那么简单,看下图两边的左右按钮先看看众所周知的解决方案如果我们想要一个半透明背景,有两种实现方式: 1.利用CSS和opacity属性 .opacity { filter:alpha(opacity=50);/*IE浏览器*/ opacity: 0.5;/*非IE浏览器*/ } 复制代码 2.建立一个24位PNG背景图片第一种利用opacity的问题除了需要通过麻烦的语法来兼容所有浏览器, 还有不单该元素

【CSS】使用边框和背景

1. 应用边框样式先从控制边框样式的属性开始.简单边框有三个关键属性:border-width.border-style 和 border-color . <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"

CSS实现兼容性的渐变背景(gradient)效果

一.有点俗态的开场白要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果.在众多的浏览器中,目前不支持Opera浏览器. 本文实例效果都是同样的效果,就是垂直渐变,起始颜色红色,结束颜色蓝色,结束的蓝色的透明度是0.5. 二.IE浏览器下的渐变背景 IE浏览器下渐变背景的使用需要使用IE的渐变

CSS实现Div透明，而显示在上面的文字不透明，但也可看到显示在下面的图片内容

CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明,也就是越小越透明,颜色可以自定义.这样可以让图片上的文字更清淅,在一些图片特效中我们会见到这种效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

CSS 基础-选择器-边框和背景-文本样式

CSS3 选择器本文内容部分来自于https://developer.mozilla.org/zh-CN/docs/Learn/CSS 选择器可以被分为以下类别: 简单选择器(Simple selectors):通过元素类型.class 或 id 匹配一个或多个元素. 属性选择器(Attribute selectors):通过属性 / 属性值匹配一个或多个元素. 伪类(Pseudo-classes):匹配处于确定状态的一个或多个元素,比如被鼠标指针悬停的元素,或当前被选中或未选中的复选框,

CSS速成教程—介绍网页背景——3

1.CSS 背景: css 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果属性描述 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-color 设置元素的背景颜色 background-image 把图片设置为背景 background-position 设置背景图片的起始位置 background-repeat 设置背景图片是否及如何重复表格中的属性我们将会通过下面两个例子给大家一一讲述. 例子 1:背景颜色 bo