css实现纯文字内容元素透明背景（兼容IE6）

HTML: <div class="title-wrapper"> <span class="title"> <span class="icon sp-index sp-index-tag-bg"> <i class="mood2 sp-base"></i> </span> <span class="txt"> <sp…

好久没写博客了.以前还想着最少一个月抽空写几篇.结果没做到O(∩_∩)O~~.好吧.现在努力,继续坚持. 看着以前写的东西,感觉自己在逐渐成长. 先上图: 本文主要记录如上图一样的.文字或内容不透明,但背景有一个“透明蒙版”的效果. 平时一般用的方法有三种: ① 先创建一个透明度跟“透明蒙版”一样的1X1大小的透明png图片.然后采用填充背景图的方法(repeat),实现背景透明而不影响文字的透明性. 优点:感觉兼容性最好. 缺点:要多弄一张透明图片. 这个就不写样式了.比较简单. ②采用opa…

css透明背景兼容方案

css透明是一个技术活,因为这里面涉及到了IE8及以下版本不兼容opacity这个css3属性,而filter:alpha(opacity=80)这个值则是不兼容IE6.网上比较流行的透明css是这样子写的. .transparent_class { /* IE 5-7 */ filter: alpha(opacity=50); /* Netscape */ -moz-opacity: 0.5; /* Safari 1.x */ -khtml-opacity: 0.5; /* Good brow…

p标签多行文字内容实现上下垂直居中兼容ie8

之前实现上下居中一般都是用height和line-height的来设置. 今天在修改样式的时候,p标签的文字内容可能是一行也可能是两行, 所以用height和line-height就没效果. 今天找到了一种方法,挺好用的. 设置p标签的父元素样式{height, position: relative;} p标签的样式加上 {position: absolute; top: 50%; left: 0; transform: translateY(-50%); -ms-transform:trans…

使用css的-moz-element()把html元素当背景图片去

background:-moz-element(id)定义了一个从任意HTML元件产生的值.此图像是实时的,这意味着如果更改了HTML元素,则会自动更新使用结果值的CSS属性.element() <image> 使用它的一个特别有用的场景是在HTML <canvas>元素中渲染图像,然后将其用作背景. 在Gecko浏览器中,您可以使用非标准document.mozSetImageElement()方法更改用作给定CSS背景元素的背景的元素. 语法 background:-moz-e…

layedit富文本编辑器获取纯文字内容和全部内容

…

jquery元素分组插件，用于把一连串元素分成多组，如把多个a标签分成多组放入<li>元素中，可以用于简化多图滚动为一个元素滚动，兼容ie6

三个参数 <script type="text/javascript"> /* *sclass:设置包裹元素的类 * packages:设置包裹的元素 * row:设置每几个元素一组 * */ $('#iscroll>a').igroup({ sclass:'hi', packages:'li', row:3 }); </script> 代码 (function ( $ ) { var $iscroll=0; var $arr=new Array(); $…

CSS实现背景透明，文字不透明（兼容各浏览器）

在 FF/Chrome 等较新的浏览器中可以使用css属性background- color的rgba轻松实现背景透明,而文字保持不透明.而IE6/7/8浏览器不支持rgba,只有使用IE的专属滤镜filter:Alpha来实现,但是这样写法会把文字也变为透明,因此只有在透明容器的子节点(文本节点除外)内设置position:relative才能不继承其父元素的透明滤镜,代码如下: #container{ background: #000000\9; filter:Alpha(opaci…

CSS三角的写法（兼容IE6）

目录简介优点原理 1. 先创建一个div 2. 然后给div设定边框. 3. 给div的四个边框都设置不同的颜色 4. 把宽度和高度都变成0 5. 其余角为透明 6. 兼容IE6浏览器造成这样的原因是: 最简单的解决办法:(后面添加) 其他的解决办法: 7. 解决内联元素的三角显示问题为什么会有这个问题解决办法 1. 去掉固定的内容高度 2. 将内联元素转化为块级元素或者行内块元素 3. 将元素脱标(如果涉及特殊的布局可以直接使用) 最终代码扩展有角度的三角有一个角是直角的三角…

【原】CSS实现背景透明，文字不透明，兼容所有浏览器

11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐性节日,以庆祝自己仍是单身一族为骄傲,而如今是各大商家以脱光为由打折促销的时期,成为了所谓的”购物节“,双11也算了,后面还要搞双12,不得不吐槽下. 于是呢,熬夜加班做了11.11的活动,在PC端遇到了透明背景和透明图片的问题,其实以前也遇到过,只是没有总结起来,就忘记了,这次又撞墙了,必须记录下…

CSS实现背景透明，文字不透明，兼容所有浏览器

11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐性节日,以庆祝自己仍是单身一族为骄傲,而如今是各大商家以脱光为由打折促销的时期,成为了所谓的"购物节",双11也算了,后面还要搞双12,不得不吐槽下. 于是呢,熬夜加班做了11.11的活动,在PC端遇到了透明背景和透明图片的问题,其实以前也遇到过,只是没有总结起来,就忘记了,这次又撞墙了,…

使用RGBa和Filter实现不影响子元素的CSS透明背景

点击查看原文问题如果我们想要一个元素拥有半透明的背景,我们有两个选择: 使用CSS和 opacity 做一张 24-bit PNG 背景图片在CSS中使用opacity有两个问题,一是为了适应所有的浏览器,我们要对付opacity讨厌的语法:二是opacity不仅使目标元素的背景变得半透明,而且使它所有的子元素的背景也变成了半透明.这意味着它里面所有的文本(译者注:图片也一样)都具有同样的透明度,我敢肯定没几个人想要这样的效果.可以通过添加一些不必要的元素,使用CSS定位技巧类似的手段…

兼容IE、Firefox的背景半透明内容不透明设置

首先要说明的是背景是内容的祖先元素.如果是兄弟节点那就没有必要记录这篇文章了. 记录一下,知其然也知其所以然. IE8-特点: 1.不支持"opcity:0.5;"这种写法,只支持"filter:alpha(opacity=50)". 2.如果背景元素拥有css属性设置了z-index的值(除默认值auto外),则内容会随着背景元素一起半透明 3.如果背景元素的内容元素本身或其祖先节点(这些祖先节点是背景元素的后代节点)没有设置css定位属性position:rel…

CSS 框模型——规定了元素框处理元素内容、内边距、边框和外边距的方式

转自:http://www.w3school.com.cn/css/css_boxmodel.asp 要知道在父元素:float, rel, abs位置情况下,box模型的变换情况,请见:http://www.cnblogs.com/hh54188/archive/2010/12/28/1919078.html,此外,对于如何计算父元素的width和height,该文章也说明了~ CSS 框模型概述元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框…

透明窗口（窗口上面文字图片等内容不透明）的实现（使用SetLayeredWindowAttributes API函数）

透明窗口(窗口上面文字图片等内容不透明)的实现本文讨论通过SetLayeredWindowAttributes来实现本文的目的. SetLayeredWindowAttributes的实现必须将窗口设置为WS_EX_LAYERED的扩展风格. 然而,只有WS_POPUP窗口才能设置WS_EX_LAYERED的扩展风格.这就意味着只能够在POPUP的窗口中实现透明窗口,而在WS_CHILD风格的窗口中是不能够实现的. 当初我就是试了半天发现不行的. SetLayeredWindowAttri…

这些HTML、CSS知识点，面试和平时开发都需要 No5-No7（知识点：文字设置、设置背景、数据列表）

系列知识点汇总这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置.设置背景.数据列表) 这些HTML.CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作.构建表单) 这些HTML.CSS知识点,面试和平时开发都需要 No10-No11(知识点:表格操作.代码编写规则) No5.文章段落 1.文字属性文字属性包含font-*和tex…

通过IE私有滤镜让IE6 7 8支持背景透明，内容不透明效果。

CSS3已经支持背景rgba的rgba透明度,这一方法可以避免元素内容也随背景一起变透明(详情请阅http://www.cssha.com/css3-new-knowledge-student).但是这一属性在低于IE9的版本中却不被支持,我们可以通过IE私有滤镜来实现背景透明效果.rgba参数格式:(red,green.,blue,alpha),alpha值0-1.ie滤镜参数#3363370b,前两位为16进制透明度,比如说值是上面用到的0.2,那么就是0.2×255＝51,再转换成16进制…

CSS 元素透明

1.HTML 元素透明其实本身,CSS 实现元素透明是件容易事儿.直接上代码: opacity:.5 opacity 指的是不透明度,取值为 0~1 之间,1 表示完全不透明,0 表示完全透明. A 级浏览器基本都支持 opacity 属性,但碰上 IE,总没好事.不过 IE 有滤镜,可以帮助我们拐弯抹角地搞定不透明度: filter:alpha(opacity=50); 注:事实上会碰到透明背景层,而 opacity 属性是会继承的,避免这个问题,需要结合定位来实现. 在 CSS3 中,…

吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：将页面元素所包含的文本内容替换为背景图

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"…

神奇的 CSS，让文字智能适配背景颜色

最近几天,有好几个同学都问了同样一个问题. 页面上有一段文本,能否实现这段文本在不同背景色下展示不同的颜色?也就是俗称的智能变色.像是下面这样: 文本在黑色底色上表现为白色,在白色底色上表现为黑色.看似很复杂的一个效果,但是其实在 CSS 中非常好实现,今天就介绍这样一个小技巧,在 CSS 中,利用混合模式 mix-blend-mode: difference,让文字智能适配背景颜色. 混合模式 mix-blend-mode: difference CSS3 新增了一个很有意思的属性 -- mi…

Css:背景色透明，内容不透明之终极方法！兼容所有浏览器

转载 http://www.cnblogs.com/jikey/archive/2012/08/31/2665880.html <!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/x…

Python爬虫小实践：爬取任意CSDN博客所有文章的文字内容（或可改写为保存其他的元素），间接增加博客访问量

Python并不是我的主业,当初学Python主要是为了学爬虫,以为自己觉得能够从网上爬东西是一件非常神奇又是一件非常有用的事情,因为我们可以获取一些方面的数据或者其他的东西,反正各有用处. 这两天闲着没事,主要是让脑子放松一下就写着爬虫来玩,上一篇初略的使用BeautifulSoup去爬某个CSDN博客的基本统计信息(http://blog.csdn.net/hw140701/article/details/55048364),今天就想要不就直接根据某个CSDN博客的主页的地址爬取该博客的所有…

div背景透明内容不透明与0.5PX边框兼容设置

1.问题:设置 border-width:0.5px; 并兼容安卓和苹果移动端. 兼容:苹果IOS的 safari 支持浮点数边框,安卓浏览器不支持,会四舍五入到1px.不同浏览器效果额不同解决方案:设置2层嵌套的div,最外层的用来定位,保障我们设置的内容不会脱离原先的文档流. 里层设置两个div,一个用来书写内容,一个用来专门设置边框 HTML代码 :  <div class="po…

WPF Windows背景透明其中的文字保持不透明

原文:WPF Windows背景透明其中的文字保持不透明版权声明:本文为博主原创,未经允许不得转载.交流.源码资料加群:161154103 https://blog.csdn.net/mpegfour/article/details/78815791 实现效果如图: 实现代码: <Window x:Class="Gvitech.Application.WPF.UI.FunFacility.WindowEquipmentRecord" xmlns="http://sc…

页面元素固定在页面底部的纯css代码（兼容IE6）

<!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-…

css图片替换文字

含义: 图像替代,就是像我们在平时将文本添加到文本中,然后通过css隐藏文本在它的位置上显示一个背景图片,这样,搜索引擎仍然可以搜到HTML文本,即使我们禁用css后,文本时仍然是可以显示的. 引用<精通css>中的一段解释: HTML文本由很多的优点.文本可以被搜索引擎读取,开发人员可以对其进行复制和粘贴,并且在浏览器中改变字体大小后,它也会改变.因此很多设计人员都想尽量的采用HTML文本而不是文本的图像,但是遗憾的是,页面设计人员对于文本有有限的选择,尽管可以通过css来控制版面但是有很多…

css中的流，元素，基本尺寸

流元素基本尺寸流之所以影响整个css世界,是因为它影响了css世界的基石 --HTML HTML 常见的标签有虽然标签种类繁多,但通常我们就把它们分为两类: 块级元素(block-level element)和内联元素(inline element). 1.块级元素 1.1 概念相关 "块级元素"对应的英文是 block-level element,常见的块级元素有 div,li,table等. 块级元素和 display:block 不是一个概念例如块级元素 li 和 tab…

前端三件套 HTML+CSS+JS基础知识内容笔记

HTML基础目录 HTML基础 HTML5标签 doctype 标签 html标签 head标签 meta标签 title标签 body标签文本和超链接标签标题标签段落标签换行标签水平标签强调标签图片标签与超链接标签图片标签超链接标签音频标签视频标签音频标签视频标签列表.div 以及 span 标签列表标签 div 标签 span标签表格标签表单标签输入框单选按钮复选框下拉框表单验证类型匹配验证 CSS基础语法样式表的分类外部样式表内嵌样式表…

CSS你所不知的伪元素的用法

你所不知的 CSS ::before 和 ::after 伪元素用法博客分类: Div / Css / XML / HTML5 CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面,里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外,就是接下来要介绍的这两个伪元素了. Creative Button…

原生JS实现旋转轮播图+文字内容切换

废话不多说,直接上图看效果: 需求:点击左右按钮实现切换用户图片与信息: 原理:点击右侧左侧按钮,把3号的样式给2号,2号的给1号,1号的给5号,5号的给4号,4号的样式给3号,然后根据现在是第几张图片切换成对应的文字: 步骤: 1.让页面加载出所有盒子的样式: 2.把两侧按钮绑定事件(调用同一个方法,只有一个参数,true为正向旋转,false为反向旋转): 3.书写函数:操作函数:左按钮:删除第一个,添加到最后一个:右按钮:删除最后一个,添加到第一个: 4.定义变量,根据对应变量切换对应的文…