背景渐变css
在建企业网站时使用CSS边框圆角是很容易的事，但要设置边框圆角的渐变效果就需要费些功夫了，需要正确理解几个CSS属性的含义，background-origin,background-clip,background-size这几个是必须用到的，调整好性能的数值就可以灵活运用了。
想要实现CSS圆角渐变并匹配内容背景图可以参考以下代码：
<style>\ndiv {\n width: 500px;\n height: 300px;\n margin: 10px;\n padding: 30px;\n border-radius: 50px; /*设置圆角*/\n border:50px solid transparent; /*设置边框颜色透明，确保背景渐变色显示*/\n background-origin:border-box; /*从边框开始背景图*/\n background-clip:padding-box,border-box; /*设置第一个背景和第二个背景的范围*/\n background-size:cover;\n /*由于背景图像不能设置纯色，所以可以使用下面的方式设置纯色*/\n background-image:linear-gradient(#fff, #fff),linear-gradient(#FC0, #F30); \n}\n.a1{display:block;height:280px;background-image:url(/images/school.jpg);\nbackground-repeat:no-repeat;background-size:contain;}\n</style>\n\n<div>\n<span class="a1">边框渐变色从内边框到边框，背景图像单独设置不重复。</span>\n</div>background-origin表示的是背景起始位置，其三个值如下，依次是
border-box 从边框开始；
padding-box(默认) 从内边距开始；
content-box 从内容开始。
background-origin: border-box | padding-box(默认) | content-box
background-clip表示的是背景填充位置，其四个值如下，依次是
border-box(默认) 填充至边框；
padding-box 填充至内边距；
content-box 填充之内容；
text 作为字体前景色。
background-clip: border-box(默认) | padding-box | content-box | text
background-size表示的是背景尺寸，其五个值如下，依次是
contain 将图像扩大至适应最短的边，剩余部分默认重复图像
cover 将图像扩大至适应最长的边，图像可能显示不完整
length 两个值依次设置图像宽和高，未设置则为auto
percentage 两个百分比依次设置图像宽和高，未设置则为auto
auto 默认设置
纪夏使4854如何使用CSS使网页背景图片延伸 -
戎刚行17014446475 ______ 背景色渐变两种方法: 1,做一个竖的细条gif,颜色从上到下渐变.以此作背景图.背景图片的颜色无法无限延伸,因为gif长度有限; 2,css滤镜做背景色渐变如下,背景颜色渐变可以无限延伸:程序代码<style type=＂text/css＂
纪夏使4854网页背景可以用css样式渐变吗 -
戎刚行17014446475 ______ 我补充一下,目前纯的CSS渐变CSS3已经出来了,但貌似支持的浏览器屈指可数,火狐,谷歌的最高版本好像支持,记不清了,目前这个情况下,只能借助图片实现,见楼上两位,CSS 3和HTML 5的功能是灰常强大的,我们的未来很绚烂
纪夏使4854css里的小图片里加了一个渐变背景, 我要怎么写css啊? -
戎刚行17014446475 ______ 有一种方法,先在作图软件Firework或者PS里面做一张黄色背景的渐变图,然后把你要加入的图片放进去,然后组合到一块,最后切出来!然后在CSS里面之间加背景就可以了!第二种方法是,先做黄色的渐变图,然后在CSS里面加上去做背景,然后把图片插入这个背景里面就好了,要移动把图片转成区块就可以了!不知道你看得懂不?希望帮助到你!
纪夏使4854请教大师们,网页背景色,渐变,是插入图片还是用css就能实现效果? -
戎刚行17014446475 ______ 给你一个思路 假如你要从左往右渐变的话你就弄一根高1px,宽我用的是2000px的图片,也就是一根线,这根线是从左往右渐变的,你将其用作网页的背景图片它就会填充整个网页实现从左往右渐变了,从上往下渐变的话这个图片就是宽1px高2000px.bigimg{background-image(这个图片的路径)}<body class=＂bigimg＂>
纪夏使4854css如何实现网页背景的对角渐变效果 -
戎刚行17014446475 ______ 目前的css标准无法达到渐变效果只能使用图片 你发的例子是用了IE的私有滤镜 只能在IE浏览器上达到效果 其他的浏览器都无法正常浏览 ,想实用的话 很简单 ,在 css添加 body {filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=用起始颜色替换,endcolorstr=用结束颜色替换,gradientType=1)} 起始颜色和结束颜色也是IE私有的#xxxxxxxx 八位格式
纪夏使4854css如何实现图片的透明渐变? -
戎刚行17014446475 ______ css问题filter: alpha(opacity=100,finishopacity=0,style=2) alpha是来设置透明度的,它的基本属性是filter:alpha(opacity,finishopacity, style,startX,startY,finishX,finishY). opacity代表透明度数,选值0-100,0是完全透明,100是不透明. finishopacity用来设置结束时的透明度,以达到渐变效果.取值范围也是0-100.style指渐变类型,0是无变化,1是线行渐变,2是放射渐变,3是X型渐变.
纪夏使4854CSS背景渐变 -
戎刚行17014446475 ______ 我看不了你的链接,不过渐变我可以说一下:你做一张渐变的图片,然后通过背景写进去,background:url(); 技巧是,这张渐变图片很大,你要把他切成一张高或者宽只有一像素的小图,为什么呢?线性渐变一般都有规律,横向或者纵向,...
纪夏使4854CSS3样式中如何让背景渐变与背景图片共存? -
戎刚行17014446475 ______ 目前,对CSS3支持日趋完善,实现兼容性的渐变背景效果是完全可以的,让背景渐变与背景图片共存的方法很简单,主要要注意的是图片要 保持“最小单元”的准则,选择正确的浏览器,该问题就能得到解决,下面介绍一下具体的解决方法....
纪夏使4854网页背景渐变
戎刚行17014446475 ______ 在样式中加入:height:100px;就可以另前100像素的地方渐变了~!
纪夏使4854CSS3中如何实现渐变效果 -
戎刚行17014446475 ______ 要得上面的线性渐变效果,我们这样去定义CSS3样式:background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /* Saf...