css渐变色背景w3school

2024-11-09

CSS3背景颜色渐变效果

1.firefox浏览器: background-image: -moz-linear-gradient(top , #eef9fe, #d1ecff); 2.safari.chrome浏览器: background-image: -webkit-gradient(linear, % %, % %,from(#eef9fe), to(#d1ecff)); 3.Opera浏览器: background-image: -o-linear-gradient(top , #eef9fe, #d1ecff

img只显示图片一部分或 css设置背景图片只显示图片指定区域

17:14 2016/3/22img只显示图片一部分或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左上角为0,0或0%,0%,右下角为高度和宽度,或100%,100%. clip:rect(300px 100px 300px 0px); 设置显示图片的某个区域,分别是上右下左的顺序设置部分代码:<style type="text/css">img {position:abs

兼容主流浏览器的css渐变色

网页中的渐变色区域,渐变色背景,一般都是通过ps图片方法来实现,但是图片放得多了会影响网页的打开速度,本文介绍的就是用纯 CSS 实现 IE .Firefox.Chrome 和和Safari都支持的渐变色效果. 一. 支持IE的css渐变色设置 FILTER: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#EEEEEE', endColorstr='#ffffff'); 修改参数:Gradie

第四界css大会黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等

1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css网格背景</title> <style type="text/css"> body{ background-color: #451F46} div{margin:20px;} .stripe1{ wi

CSS 设置背景透明度，不影响子元素

由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素．解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 */ background: rgba(0, 0, 0, 0.6); } 2> 使用 opacity, 设置一个背景DIV,此DIV使用绝对布局 Example <div class="demo"> <div class="demo-bg"&g

css 设置背景图片模糊，内容不模糊

需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> .content { color: #ffffff; font-size: 40px; } .bg

CSS实现背景透明，文字不透明（各浏览器兼容）

/*CSS*/.waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; line-height:28px; font-size:12px; font-family:Arial, Helvetica, sans-serif;}.con{ text-align:left; width:500px; height:400px; margin:0px auto; paddin

CSS实现背景透明，文字不透明（各浏览器兼容） (转)

/*CSS*/ .waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; line-height:28px; font-size:12px; font-family:Arial, Helvetica, sans-serif;} .con{ text-align:left; width:500px; height:400px; margin:0px auto; padd

CSS中背景图片定位方法

转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰日期: 2008年5月 7日 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-pos

CSS实现背景透明/半透明效果的方法

全透明代码:{background:transparent} 半透明代码:{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%} 其他的还有不少文章,有个不错,如何用CSS实现背景半透明效果? 内容详细如下:http://llf535.cn 龙行天下精彩内容等着你引用如何用CSS实现背景半透明效果?做过活动页面的同学可能会遇到要做背景半透明的效果,我们一般的做法是用两个层,一个用于放文字,另一

CSS实现背景图尺寸不随浏览器大小而变化的两种方法

一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变: 再比如花瓣网( huaban.com ): 现在用CSS来实现这一效果. 首先需要一张足够大尺寸的图片,上图百度背景图的尺寸为1600*1000px( 图片地址:http://4.su.bdimg.com/ski

CSS的背景属性和边框属性

CSS的背景属性: background 简写属性,作用是将背景属性设置在一个声明中 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-color 设置元素的背景颜色 background-image 把图像设置为背景 background-position 设置背景图像的起始位置 background-repeat 设置背景图像是否如何重复实例代码一: <p style="background-color:pink; widt

C# 如何添加PPT背景（纯色背景、渐变色背景、图片背景）

我们在创建Powerpoint文档时,系统默认的幻灯片是空白背景的,很多时候我们需要自定义幻灯片背景,以达到美观的文档效果.在下面的示例中将介绍给PowerPoint幻灯片设置背景的方法,主要包含以下三个部分: 添加纯色背景添加渐变色背景添加图片作为背景所需工具 Free Spire.Presentation for .NET 版本3.3 (社区版) 示例代码(供参考) 步骤 1 :添加如下using指令 using Spire.Presentation; using Spire.Pres

css插入背景图片底部有白边的解决方法

相信很多小伙伴遇到过用CSS插入背景图时,底部出现白边的情况,如下图: 个人总结了2个方法如下: 解决方法1:给图片都加上 vertical-align: middle属性.有时,移动端也会有类似的情况出现,如下图: 这种情况在移动端出现时,也可以给图片加上这个属性,(微信页面可能出现底部白边的情况更多,可能是因为很多微信页面是以图片为主) 解决方法2:用PS软件把背景图片的高度调高一些.出现的原因:可能是背景图片本身的高度不够,这种情况一般会出现底部留白比较多的情况,如下图: 注:个人推荐

CSS中背景图片的background-position中的left top到底是相对于谁的？

在学习的时候遇到了如下问题: CSS中背景图片的background-position中的left top到底是相对于谁的,content-box?padding-box?border-box? background属性中的backgound-image和background-color相对的box是一致的吗? 如何做到背景图片位于容器的右边10px,底边10px? 首先我们来看一下盒模型:盒模型从外到内依次为:margin-box,border-box,padding-box,content-

css设置背景固定不滚动效果的示例

css设置背景固定不滚动效果的示例背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背景不滚动的效果 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

(转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是

纯CSS控制背景图片100%自适应填充布局

https://blog.csdn.net/wd4java/article/details/50537562 解决: html,body{height: 100%;width: 100%;margin:0;padding:0;} body{ background:url(bg-login.png)no-repeat; width:100%; height:100%; background-size:100% 100%; position:absolute; fil

HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同. 前两种定位,都是将背景图片左上角的原点,放置在规定的位置.请看下面这张图

CSS的背景

CSS的背景 1. 背景颜色background-color div { background-color: 颜色值; } 一般情况下元素背景颜色默认是transparent(透明). 2. 背景图片background-image div { background-image: none或url(图片的url); } 参数值作用 none 无背景图(默认值) url 背景图片的url地址注: 实际开发中常见于logo.一些装饰性的小图片,或着是超大的背景图片优点是非常便于控制位置,例如运

css 3 背景图片为渐变色（渐变色背景图片）学习笔记

6年不研究CSS发现很多现功能都没有用过,例如渐变色,弹性盒子等,年前做过一个简单的管理系统,由于本人美工不好,设计不出好看的背景图片,偶然百度到背景图片可以使用渐变色(感觉发现了新大陆).以后的项目中也用过几次,每次都要百度,这里系统学习一下,并记下笔记,方便下次复习. (1)双色渐变,默认方向是向下的效果如下图 background-image: linear-gradient(green,white); (2)可以通过关键字 to right,to left ,to bottom ,to

css渐变色背景w3school

热门专题