CSS3透明背景+渐变样式 转载自博文:<CSS3透明背景+渐变样式> http://blog.csdn.net/netbug_nb/article/details/44343809 效果: 核心代码如下: .map-interview { background-image:-webkit-linear-gradient( to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 5%, rgba(0,0,0,0.6) 10%, rgba(0,0,0,0.6) 9…

关于css3的渐变,目前各大浏览器还未做到很好的支持,所以需要在我们使用时加上各大浏览器前缀. -moz-:使用Mozilla内核的浏览器(Firefox浏览器) -webkit-:使用Webkit内核的浏览器(Chrome,Safari浏览器) -o-:使用Opera内核的浏览器(Opera浏览器) 这里对IE不做过多介绍,对于本文背景颜色的渐变,也没有考虑IE 一.线性渐变(linear-gradient) 1.语法:-moz-linear-gradient(<point>/<ang…

使用CSS3的人都知道背景background-image是可以线性渐变(linear-gradient)和径向渐变(radial-gradient),但是想要做到过渡动画,单纯的background-image是不够的 (1)/* 借助background-position */ /****** CSS *****/ .position { width: 400px; height: 200px; background: linear-gradient(to right, red, yello…

1.不等垂直条纹. <!-- 不等垂直条纹 --> <div class="div1"></div>div1 div{ width: 200px; height: 200px; } .div1{ background: linear-gradient(#ff0 30%, #f00 30%); background-size: 100% 30; } 2.垂直条纹渐变 .div5{ background: linear-gradient(#ff0 30%…

#grad { background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */ background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/ background: -moz-linear-gradient(right,rgba(255,0,0,0)…

在线演示 本地下载…

CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核,主要有 Mozilla(Firefox,Flock等).WebKit(Safari.Chrome等).Opera(Opera浏览器).Trident(讨厌的IE浏览器). 本文照常忽略IE不管,我们主要看看在 Mozilla.Webkit…

一.前言 很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认知这一特性,以下笔记以便日后查阅. 二.CSS3的各种背景渐变   1. 线性渐变 示例——七彩虹 代码: <style type="text/css"> .rainbow-linear-gradient{ width: 460px; height: 160px; background-image: -webkit-linear-gradient(left,#E50743 %…

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). 为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核,主流内容主要有Mozilla(熟悉的有Firefox,Flock等浏览器).WebKit(熟悉的有Safari.Chrome等浏览器).Opera(Opera浏览器).Trident(讨厌的IE浏览器).本文照常忽略IE不管,我们主要看看在Mozilla.Webkit.Opera下的应用,当…

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

css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: <style> .content_bg{ width:600px;max-width: 100%;margin: auto; height:150px; line-height:150px; text-align:center; font-size:32px;color:#fff; backgro…

Firefox浏览器下的渐变背景  Firefox3.6background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));chrome/Safari浏览器下的渐变背景实现   Safari4background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));综合 – 兼容性的渐变背景效果filter:alpha(opac…

.clear-float() { content: ''; display: block; clear: both; height:; } //伪元素清除浮动 .after-clear() { &:after { .clear-float(); } } //背景填充 .background-size(@size:100%) { -moz-background-size: @size @size; -webkit-background-size: @size @size; -o-backgroun…

目录 CSS参考手册:http://css.doyoe.com/ 1.字体简写:font:font-style || font-variant || font-weight || font-size || /line-height || font-family 2.字体分样式 字体倾斜:font-style:"normal | italic | oblique": 小型大写字母:font-variant:"normal | small-caps | inherit"…

一.作为图片存在的CSS3 gradient渐变 我觉得CSS3 Backgrounds比较厉害的一个地方就是支持多背景,也就是背景图片个数可以无限累加,正好CSS3的gradient渐变性质是background-image,于是,我们可以实现任意数量渐变背景图的叠加效果.甚至,理论上,任意彩色jpg图片都是可以使用CSS3渐变背景实现的. 这种特性和box-shadow类似,参见“CSS3 box-shadow盒阴影图形生成技术”,text-shadow也有无限累加性,通常我们可以实现任意粗…

进来的小伙伴应该已经看过了我的博客样式,但还是贴张图先: 先大致说一下实现的思路,然后把代码贴出来供小伙伴们参考. 由于不是特别技术性的文章,格式就放宽松一点,跟着意识流走吧. 先跟大家分享一个渐变背景素材的网站: https://webgradients.com/ 大家进去会发现是这样的: 这是一个CSS做的渐变特效,复制了CSS之后就可以直接用了,复制的代码是 background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%…

一.背景切割   background-clip :border-box | padding-box | content-box   作用:为将背景图片做适当的裁剪,以适应需要.   默认格式 background-clip :border-box,border的区域也有背景图,但是背景图图片是从border-top和border-left的位置开始平铺的,所以当背景图片no-repeat的时候,border-top和border-left的背景是背景色不是背景图,只有当背景repeat的时候,…

css透明是一个技术活,因为这里面涉及到了IE8及以下版本不兼容opacity这个css3属性,而filter:alpha(opacity=80)这个值则是不兼容IE6.网上比较流行的透明css是这样子写的. .transparent_class { /* IE 5-7 */ filter: alpha(opacity=50); /* Netscape */ -moz-opacity: 0.5; /* Safari 1.x */ -khtml-opacity: 0.5; /* Good brow…

最近在项目中遇到了浏览器兼容问题,透明背景图在IE或360兼容模式下没有效果,以前都是网上搜到结果,直接用了,并没有深入的去理解和利用,总会在下一次使用的时候忘记.为了让自己在前端方面学习更有成效,想想还是记录下来比较好,做个总结. 知识要点: CSS3的rgba()浏览器兼容 rgba()颜色值目前得到以下浏览器的支持:IE9+.Firefox3+.Chrome.Safari以及Opera10+ rgba颜色值是rgb颜色值的一个扩展,增加一个alpha,它规定了对象的透明度 rgba()颜色…

PNG 图片在网站设计中是不可或缺的部分,最大的特点应该在于 PNG 可以无损压缩,而且还可以设置透明,对于增强网站的图片色彩效果有重要的作用. 但为什么 PNG 图片却没有 GIF 和 JPG 图片的使用来得广泛呢,这个祸因应归属于微软的 IE 浏览器(Firefox 和 Opera 对 PNG 支持的比较好,而现在浏览器的主流IE6 却无法很好的支持).不过微软在最近也开始改过自新了,新出的的 IE7 可以很好的支持 PNG,可以想象在未来的网络世界,PNG 图片的重要性将会更加凸显. 但在…

CSS3 Gradients(渐变) 一.简介 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用.此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的. CSS3 定义了两种类型的渐变(gradients): 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向 径向渐变(…

一.前言 08.02更新:已魔改插件 可以直接下载插件使用了 10.18跟新:已发布到vscode扩展  下载地址 下载后手动安装就ok了,具体配置安装后点开插件有说明的!!! 今天看到了博客园 这篇文章 后  Visual Studio 2017 设置透明背景图  ,琢磨了下难道vscode不行吗.. vscode目前有一个设置背景的插件 background  不过并不是整个界面显示,有点美中不足,所以就先下载了这个插件的源码,发现是改了其中一个css文件实现的, 本来想改下源代码重新发个包…

来源:GBin1.com 在线演示   在线下载 现代的网页设计技术已经允许开发人员在大多数浏览器中快速实现所支持的动画,其中消息警示是非常普遍的.由于默认的JavaScript警示框往往设计不佳和过于侵入式,这导致开发人员想到找出一个更友好的用户界面解决方案.在本教程中,我会解释如何可以将CSS3警示框放在页面主体的顶部,然后, 用户可以通过点击让警示框消失,最终从DOM中删除.作为一个有趣的附加功能,我还提供了按钮,在这里你可以点击到页面顶部追加新的警示框.查看以下示例 演示,进一步了解我们…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

前段时间由于手机项目需要实现一个背景渐变功能,  开始是想切个小背景图平铺下,  后来想到css3可以实现,如是用下面的代码就实现了. .sec_case_list li  span{ background:linear-gradient(bottom, #000, transparent); background:-webkit-linear-gradient(bottom, #000, transparent); background:-moz-linear-gradient(bottom,…

移动端背景渐变,非常的年轻,符合90后年轻一代的审美,css3的这个渐变目前主要是应用在手机前端领域. 产品设计中使用渐变色的好处:1:观众不至于眼睛过于疲劳(如果是浅色背景,3个小时下来极容易造成观众闭上眼睛还有残影,眼睛会极度疲劳).2:优雅而低调的深浅色调:3:纯色单调 渐变色一是色彩不单调 二是在有限空间内尽可能制造空间感4:稍微加点渐变可以让纯色层显得更细腻,不那么单调.画面显得更丰富.代码如下,非常简单 新的梯度渐变语法,新的语法包含四个渐变函数: linear-gradient()…

css3-10 css3中的边框样式有哪几种 一.总结 一句话总结:1.border-radius 2. box-shadow 3.border-image三种,box一种border两种 1.css3中的边框样式有哪几种? 1.border-radius 2. box-shadow 3.border-image三种,box一种border两种 边框样式(新加):1.border-radius 值为圆的直径 2.box-shadowbox-shadow:0px 0px 0px 0px #999;…

这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: background-image :设置元素的背景图片. background-repeat :设置如何平铺背景图片. background-attachment :设置背景图片是否固定或随着滚动移动. background-position :设置背景图片的位置. background-size…

最近碰到了一个问题,做动画时怎么设置透明背景,字是白色的,网上搜了一下,发现可以这样做 在插入的flash代码中加入这一行代码就可以实现了 <param name="wmode" value="transparent">…

一.前言 刚接到个任务,要把带有透明背景的章子图片打印出来,开始觉得不是很简单吗,直接用vc自动生成的打印功能不就ok了.不过问题却不是想像的那么简单! 二.窗口中显示透明图片 在窗口中显示图片,可以用强大的CImage类,这个类能加载很多常见格式的图像文件,当然对于我要加载的png格式的透明图片也是可以的.具体的代码如下: CImage m_image; m_image.Load(_T("picture.png")); if (m_image.IsNull()) { MessageB…