前端技术

前端技术:HTML CSS js/jQuery

  • CSS 设置某元素的背景颜色透明

    CSS 设置某元素的背景颜色透明

    要设置某一元素的背景为透明,在 chrome 、firefox、opera 下是这样的:background-color: rgba(0, 0, 0, 0.4);  rgba 中的最后一个参数 0.4 就是想要的透明度,范围在0~1之间。在 ie 中一般是这样的:background-color: rgb(0, 0, 0);  ...

  • CSS 兼容所有浏览器背景色透明 文字不透明CSS方法

    CSS 兼容所有浏览器背景色透明 文字不透明CSS方法

    设置透明背景文字不透明,可采用的属性有rgba和IE的专属滤镜filter:Alpha,其兼容性如下图所示:<!DOCTYPE html><html><head><meta charset="utf-8"><title>背景透明,文字不透明</title><style>*{    &...

  • CSS 透明背景色

    CSS 透明背景色

    <div class="box"></div><style>.box{width:300px; height:200px; margin:0 auto; boxder:1px solid #ccc; background:#000; filter:alpha(opacity:30); opacity:0.3;  -moz-opacity:0.3;-khtml-opacit...

  • CSS 网站背景颜色高亮度显示

    CSS 网站背景颜色高亮度显示

    div{background-color: red; -webkit-filter:brightness(1);//兼容不同浏览器 -o-filter:brightness(1); -moz-filter:brightness(1); filter:brightness(1);//设置亮度值,范围:0-1}动态设置亮度值  var tem = 0.5; $(".div").css('...

    CSS学习 3周前 21 0 背景颜色
  • overflow:hidden不能百分百截断溢出,特别是遇到position的时候!

    overflow:hidden不能百分百截断溢出,特别是遇到position的时候!

    以前好像学习过position与overflow的关系,但不是太深刻,特别是overflow:hidden的运用!今天来讲的通俗来说:overflow:hidden在当爹的时候,绝对定位功能的孙子会因为爷爷是相对定位,而不听老爸的管束!为了页面的健壮性,我们常常需要使用overflow:hidden。有时候是为了防止布局被撑开,有时候是为了配合其它规则实现文字截断,还有时候纯粹是为了创建块级上下文。但是,很多人对这个属性是存在着一定的误...

    CSS学习 2个月前 49 0 overflowposition
  • 纯CSS实现自适应浏览器宽度的正方形

    纯CSS实现自适应浏览器宽度的正方形

    本文可以延伸为自适应的时候等比例缩放图片,避免出现白边或者显示不全的问题!1、宽度100%时候,图片的height高度完全可以用PC端宽高百分比,用vw进行判断!2、或者直接使用height=0,然后用padding-bottom撑开高度!JavaScript实现自适应浏览器宽度,可以监听onresize事件。纯CSS实现自适应浏览器宽度的正方形有以下三种方法:1、方案一:CSS3 vw 单位CSS3 中新增了一组相对于可视区...

    CSS学习 3个月前 143 0 正方形
  • 纯CSS写三角形,自适应不同宽度

    纯CSS写三角形,自适应不同宽度

    今天在写一个定制模板的时候,遇到一个全屏三角形做的特效,需要用到自适应,在不同分辨率下都三角形都能自适应居中!看图:因为这个zblog模板需要自定义配色,所以这个三角形必须使用css制作,不能使用背景图片,当浏览器缩小的时候,三角形居中不变!HTML:<div class="triangle"><div class="box"></div>&...

    CSS学习 3个月前 159 1 三角形
  • display: table-cell 无法使用 margin/ padding 的解法

    display: table-cell 无法使用 margin/ padding 的解法

    之前发过一篇,用div+css替代table的文章,因为div+css实在好用。已实际用过display: table的朋友,当你们在使用的时候,也许会碰到「间距调整」的问题,例如要在每一个table-cell裡头设定margin等间距调整,却发现修改无效。假设你碰过这种状况,不妨参考一下我推荐的解法。话不多说,先上个范例!我使用图片+图说当作范例,例子包含:正常状况下,图片紧密排列使用margin调整的结果将宽度写死的结果使用bord...

  • 从table转而使用div+css

    从table转而使用div+css

    一般来讲,table打好语法就可以呈现效果了,而且语法很简单,就单纯的table、tr、td,这三个语法就可以画出表格,在各个浏览器下也都可以正常的显示。如果觉得排版不漂亮,就直接在语法内加上width、color等等的属性值,效果很容易就达到了,可是这样会让程式码杂乱。对于搜寻引擎来讲,他们抓网站内容通常不会一次抓完,会先抓到一定的网页大小,之后再来,如果你把样式调整的程式码都放进去,很快的,搜寻引擎可能光收录你的表格样式,还没抓到重...

    CSS学习 3个月前 158 0 table
  • 纯CSS 画梯形

    纯CSS 画梯形

    梯形制作过程中,涉及到border-left /right    transparent(背景透明) 还需要图形的宽度代码如下:<div id="oricl"></div> <div id="oricl1"></div>#oricl{     border-botto...

    CSS学习 3个月前 217 1 梯形
展开