最近遇到一个需求,如下图,input框要有透明效果 首先想到的方法是CSS3的 opacity属性,但事实证明我想的太简单了 这个属性虽然让input框有透明效果,同时文字和字体图标也会有透明效果,导致文字和字体图标被模糊,如下图 于是我开始思考其它方式,最后想到了通过透明背景图来实现 背景图虽然能够解决问题,但会造成空div,并且还需要设置定位 感觉把简单的事情变得复杂了,我始终认为有更简单的方法 最后终于被我找到了完美解决的方法——用CSS3的 rgba 来设置 background-col

CSS设置文字不能被选中 /*设置文字不能被选中 以下为css样式*/ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;

/*设置文字不能被选中     以下为css样式*/ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;

设置文字不换行,超过的部分用“...”代替 overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;  width: /*some num*/;

设置文字不换行,超过的部分用“...”代替  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;  width: 210px; 除width属性外,顺序不要颠倒哦!     1.white-space ① normal 默认,空白会被浏览器忽略 ② pre 空白会被浏览器保留.其行为方式类似HTML中的<pre>标签 ③ nowrap 文本不会换行,文本会在同一行上继续,直到遇到<br>标签(开始换行)

设置元素的透明度:  -moz-opacity:0.8; /*在Firefox中设置元素透明度  filter: alpha(opacity=80); /*ie使用滤镜设置透明   但是当我们对一个标签设置背景的透明度时,往往我们并不希望该标签上的文字图片也变成半透明了.   例如:  <div><p>不透明</p></div>   div{-moz-opacity:0.3;filter:alpha(opacity=30);background:#000;w

写CSS时给容器设置透明度的时候如果使用background-color: #000000; opacity: 0.5;这时会出现容器里的文字也跟着透明.解决办法是不用十六进制的色值和透明度分开写,使用background-color: rgba(000, 000, 000, 0.5);这样容器内的文字就不会透明了.

[文字与文字间距距离,字与字距离间距CSS如何设置?]如果你也遇到W3Cschool用户唐婷大小姐类似的问题不妨也到W3Cschool编程问答进行提问. 对于使用CSS解决字间距的方法W3Cschool用户徐建凯给出了如下方法:使用css样式属性letter-spacing: +距离数值+html单位 如letter-spacing:15px; 即设置了字与字距离间隔15px(像素). 例子: CSS 代码: .w3cschool{letter-spacing:15px;} 完整HTML 代码:

转:https://www.cnblogs.com/handsomeBoys/p/6599062.html HTML: <div class="book-detail-store-item align-center-vertical">居中文字</div> CSS: .book-detail-store-item { width: 50px: height:50px: line-height: 25px; font-size: 12px; } /*flex垂直居

主要css属性是border-right border-right:1px solid gray; padding-right:10px; padding-left:10px; <div data-bind="foreach:RequestListAll"> <a class="PositionName" style="display: block;color:gray; float: left; font-family: 微软雅黑; f

如果只显示一行,则可以使用以下方法: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 如果需要显示多行,在需要设置的元素style中添加以下代码: word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidd

高版本浏览器的处理方式 -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; IE10以下等低版本浏览器中需要添加unselectable="on" 才会有效果 js 实现  onselectstart="return false&quo

兼容IE/Firefox/Chrome display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

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

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

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

我们平时所说的调整透明度,其实在样式中是调整不透明度,如下图所示例: 打开ps,在图层面板上,可以看到设置图层整理不透明度的菜单,从 0% (完全透明)到 100%(完全不透明). 实现透明的css方法通常有以下3种方式,以下是不透明度都为80%的写法 css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8 css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,255,0.8) IE专属滤镜 

兼容所有浏览器的透明CSS设置: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } UPDATE: I wanted to pull this post out of the archives and update it a bit because it there seems to be a good amount of interest i

/*CSS*/.waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; line-height:28px; font-size:12px; font-family:Arial, Helvetica, sans-serif;}.con{ text-align:left; width:500px; height:400px; margin:0px auto; paddin

/*CSS*/ .waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; line-height:28px; font-size:12px; font-family:Arial, Helvetica, sans-serif;} .con{ text-align:left; width:500px; height:400px; margin:0px auto; padd

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