前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

css零基础自学教程(十四)css3透明边框,层叠背景图,opacity

一 透明边框

在元素上设置透明边框会在边框下边显示元素自己的背景.

在下面的例子中,我们使用rgba将边框设置为透明,但实际上它们显示为纯灰色.

css代码:

div.first{ border:20px solid rgba(0,0,0,0); width:200px;position:absolute; top:50px; left:50px; background-color:red;}

前端入门——css颜色和背景(css背景颜色rgb)

前言

如果网页只有一种颜色,那是非常可怕的,颜色的设置丰富了网页,就如同多彩缤纷的世界。

在了解css颜色之前,我们回顾下

CSS 合法颜色值(css颜色写法)

CSS Colors

CSS的颜色可以通过以下方法指定:

  • 十六进制颜色

  • RGB颜色

  • RGBA颜色

  • HSL色彩

  • HSLA颜色

  • 预定义/跨浏览器的颜色名称


十六进制颜色

所有主要浏览器都支持十六进制颜色值。

IE下兼容背景透明度,这一行代码就足够

相信不少小伙伴大部分都写过这样的页面,小编找来了一个例子,比如上面图中,文字的黑色背景。给一段文字加背景透明度的时候都遇见过IE不兼容的问题,下面我们聊聊这些问题的处理方法。

如何添加背景透明度

我们工作中经常用到添加背景透明度的方法两种:

1.o

CSS透明度 rgba 兼容ie8 filter(css设置透明度的两种方法)



例:

background: rgba(255,255,255,0.2);

兼容ie8

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);

#后面的8个数字被拆分为两个部分 33 ffffff他们对应 AA(IEfilter) GGBBAA(GBA)。

使用CSS隐藏页面元素的几种方法,你知道它们的具体区别吗?

前言

一说起隐藏HTML页面上的元素,很多人第一反应就是设置元素的css属性display:none;值,这是一种最常见的隐藏页面元素方法。本篇文章我们就一起看看使用CSS隐藏页面元素的方法,以及它们的区别。

本篇文章中的例子直接放到github地址中,感兴趣的同学可以自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/hideElement/hideElement.html

CSS3 opacity 属性(position css3属性)

实例

设置一个div元素的透明度级别:

div

{

opacity:0.5;

}


浏览器支持

所有主流浏览器都支持opacity属性。.

注意:IE8和早期版本支持另一种过滤器属性。像:filter:Alpha(opacity=50)


持续分享CSS使用小技巧(使用css有哪些小技巧)

背景图片固定大法(background-attachment)

background-attachment 定义和用法

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。


可能的值


实现背景图片固定的实用代码

CSS样式更改——多列、元素是否可见、图片透明度

前言

上篇文章主要讲述了CSS样式更改中的过渡、动画基础知识,这篇文章我们来介绍下CSS样式更改中多列、元素是否可见、图片透明度知识。。

1.多列 DoubleCol

1).创建多列

纯干货,前端学者的福音!如何使用css滤镜改变图片颜色

说到对图片进行处理,我们经常会想到PS,美图秀秀这类的图像处理工具。作为前端,全栈开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图片显示不同的颜色。或者是hover的时候,对图片的对比度,阴影进行处理。

你以为这些是经过PS软件处理出来的?不不不,只有一张图片,纯粹的是用css写出来的。

本文的目标就是:手把手教大家学习CSS滤镜(filter)属性,CSS滤镜提供的图形特效,像模糊,锐化或元素变色。过滤器通常被用于调整图片,背景和边界的渲染。

<< < 2 3 4 5 6 7 > >>
控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言