CSS实例代码:网页背景渐变

2016-02-20 00:11 2 1 收藏

今天图老师小编要跟大家分享CSS实例代码:网页背景渐变,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

网页背景渐变是经常用到的效果,下面用的滤镜,当然在非IE下是没效果的。

一、从上往下渐变

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
body{
FILTER: progid: DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000)";
}

二、从左上至右下渐变

body{
FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX= 100,startY=50,finishY=100); }
background-color: skyblue;
}

三、从左往右渐变

body{
FILTER: progid: DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000)";}

来源:https://www.tulaoshi.com/n/20160220/1631432.html

延伸阅读
标签: Web开发
一些CSS属性允许使用一串值代替许多属性,值使用空格分开。 margin,pdding和border-width允许合并margin-top-width, margin-right-width, margin-bottom-width等等,形式像这样:property:top right bottom left;逆时针顺序。 所以下面的代码: p { border-top-width: 1px; border-right-width: 5px; border-b...
标签: Web开发
网页中的背景设计是相当重要的,尤其是对于个人主页来说,一个主页的背景就相当于一个房间里的墙壁地板一样,好的背景不但能影响访问者对网页内容的接受程度,还能影响访问者对整个网站的印象。如果你经常注意别人的网站,你应该会发现在不同的网站上,甚至同一个网站的不同页面上,都会有各式各样的不同的背景设计。究竟都有哪些不同样式的背...
标签: Web开发
注:本文由 Robin 翻译自 webdesignerwall  (这个标题不知道该怎么翻译好, 希望大家能提提意见.) 你是否想不用photoshop来创建一个带渐变的标题文字吗? 这里用一个简单的css技巧来向你展示如何仅仅使用css和png图片来制造这种效果. 经测试这种方法适合大多数主流浏览器.当然, IE6需要一个支持透明PNG的Hack(值得庆幸的是微软正在...
5.复合背景 如果你在练习上面的“照片背景”时“不小心”也设置了<body标签里的颜色背景,那么你看到了什么?颜色背景还起作用吗?对,你能看到你的照片浮于你设的颜色背景之上,二者能够同时正常地显示出来。这就是复合背景的魅力,更为吸引人的是,当你所设置的图片背景因为某种不可知的因素而不能正常显示的时候,浏览器能...
标签: Web开发
本文介绍的技术很经典,也算是一篇老文章了,相信很多人也都看过,之前神飞有注意到国内有些翻译,但是不全面,这里我就将其完整的翻译了一下。 你想制作漂亮的标题而不用将每个标题都做成图片吗?这里是一个简单的CSS技巧,它将向你展示使用一个png图片制作渐变文字的方法(纯CSS、无Javascript或Flash)。而你所需要的仅仅是在标题里面的一...

经验教程

643

收藏

26
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部