《使用HTML5实现响应式布局》第八章-图片和背景特效-理论学习资料_第1页
《使用HTML5实现响应式布局》第八章-图片和背景特效-理论学习资料_第2页
《使用HTML5实现响应式布局》第八章-图片和背景特效-理论学习资料_第3页
《使用HTML5实现响应式布局》第八章-图片和背景特效-理论学习资料_第4页
《使用HTML5实现响应式布局》第八章-图片和背景特效-理论学习资料_第5页
已阅读5页，还剩32页未读， 继续免费阅读

付费下载

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第八章图片和背景特效理论内容颜色属性图片阴影1.颜色属性颜色属性包括颜色属性设置背景颜色颜色属性设置颜色属性color允许设计者指定一个标签的颜色。color：<颜色>颜色参数取值可以是颜色关键字，如yellow表示黄色。也可以是RGB（红、绿、蓝）颜色值。颜色值是一个RGB格式的数字颜色属性设置常用的预设颜色关键字有16个颜色关键字中文含义RGB值aqua水绿色#00FFFFblack黑色#000000blue蓝色#0000FFfuchsia紫红色#FF00FFgray灰色#808080green绿色#008000lime酸橙色#00FF00maroon栗色#800000navy海军蓝#000080olive橄榄色#808000purple紫色#800080red红色#FF0000silver银色#C0C0C0teal水鸭色#008080white白色#FFFFFFyellow黄色#FFFF00颜色属性设置DreamweaverCC的拾色器工具，可以选取和设置颜色选取的颜色颜色值颜色属性设置<style>h2{font-family:"黑体";font-size:15pt;color:red;}.text{font-family:"黑体";font-size:15pt;color:#8B0000;}</style>红色类似棕色背景颜色在CSS3中，使用background-color属性设置背景颜色background-color:<颜色>背景颜色<style>h2{font-family:"黑体";font-size:15pt;color:white;width:150px;background-color:black;}body{background-color:#ceddf4;}</style>h2前景色body背景色h2背景色2.图片图片包括背景图片背景重复背景附件背景位置背景图片在CSS3中，背景图片属性为background-image，用于设定一个标签的背景图片。background-image:none|<url>背景图片通常是GIF、JPG或PNG格式。背景图片background-image参数说明背景图像的地址，可以设置成绝对地址，也可以设置成相对地址参数说明none默认宽度url小于默认宽度，称为细边框背景颜色<style>body{

background-image:url(bk.jpg);}</style>将相对路径下的bk.jpg作为body的背景图片背景重复background-repeat背景重复属性也称为背景图像平铺属性，设置对象背景图像是否平铺以及如何平铺。background-repeat：repeat|no-repeat|repeat-x|repeat-y背景重复background-repeat参数说明参数说明repeat表示背景图像在纵向和横向上平铺no-repeat表示背景图像不平铺repeat-x表示背景图像只在水平方向上平铺repeat-y表示背景图像只在垂直方向上平铺背景重复<style>body{ background-image:url(logo.jpg);

background-repeat:repeat-x;}</style>在水平方向上平铺背景附件background-attachment背景附件属性用于设置背景图像是否随页面内容滚动。background-attachment：scroll|fixed背景附件background-attachment参数说明参数说明scroll表示背景图像随页面内容滚动，scroll参数是默认选项fixed表示背景图像固定在页面上禁止不动背景附件<style>body{ background-image:url(bk.jpg);

background-attachment:fixed}.text{ font-family:"黑体"; font-size:15pt; color:#ffffff;

height:500px;}</style>增大段落高度，以产生浏览器窗口的滚动的距离背景位置background-position背景位置属性用于指定背景图像的最初位置。该属性仅应用于块级标签和替换标签。替换标签指一些已知原有尺寸的标签。在HTML5中，替换标签包括img、input、textarea、select和object。background-position:[<百分比>|[top|center|bottom]||[left|center|right]背景位置background-position参数说明参数说明百分比表示使用数值设置图像位置，使用时应该首先指定图像的横向位置，然后指定纵向位置。例如，20％65％，指定图像位于标签左起20％、上起65％的位置left、center、right在图像的横向位置取0％、50％、100％，即位于居左、居中和居右top、center、bottom在图像的纵向位置取0％、50％、100％，即位于顶端、居中和底端背景位置<style>body{ background-image:url(bk2.jpg); background-repeat:no-repeat;

background-position:100%-50%;}</style>水印横向位置始终靠近浏览器窗口右边框背景图像尺寸可以使用background-size属性指定背景图像的尺寸。background-size:宽度高度背景图像尺寸<style>body{ background-color:#ceddf4; background-image:url(bk.jpg);

background-size:300px200px; background-repeat:no-repeat;}</style>改变背景图片的尺寸复合背景属性与字体font属性类似，background属性也是复合属性，它可以综合设置背景样式background：[background-color属性]||[background-image属性]||[background-repeat属性]||[background-attachment属性]||[background-position属性]background取值范围可以包含背景颜色、背景图像、重复属性、附件属性和背景位置，各属性之间以空格相连body{

background:#00Furl(bg.gif)no-repeat;}复合背景属性<style>body{ background:url(bk2.jpg)no-repeatrighttop;}</style>背景图片位于浏览器边框右边上部，图片不重复显示阴影阴影属性包括文字阴影盒子阴影文字阴影在CSS2版本中，为实现文字的阴影效果，需要借助Photoshop的处理来实现Photoshop处理的阴影文字阴影在CSS3中，可以使用text-shadow属性为页面上的文字直接添加阴影效果text-shadow:length1length2length3color文字阴影text-shadow参数说明参数说明length1阴影离开文字的横向距离length2阴影离开文字的纵向距离length3阴影的模糊半径color阴影的颜色文字阴影<body>

<pstyle="text-shadow:-5px-5px2pxgray"></p>

<pstyle="text-shadow:-5px5px2pxgray"></p>

<pstyle="text-shadow:5px-5px2pxgray"></p>

<pstyle="text-shadow:5px5px2pxgray"></p>

<pstyle="text-shadow:15px15px2pxgray"></p>

<pstyle="text-shadow:5px5px10pxgray"></p></body>盒子阴影通常将div视为网页局部内容的容器，比喻为盒子。盒子阴影指的就是div产生的阴影。在CSS2中，为实现盒子阴影，需要借助Photoshop的处理Photoshop处理的阴影盒子阴影在CSS3中，可以用box-shadow属性让div标签产生阴影效果box-shadow:length1length2length3color盒子阴影box-shadow参数说明参数说明length1阴影离开div的横向距离length2阴影离开div的纵向距离length3阴影的模糊半径color阴影的颜色盒子阴影<body><divstyle="box-shadow:-10px-8px6px#444;"></div><divstyle="box-shadow:10px8px6px#444;"></div><divstyle="box-shadow:10px8px#444;"></div><divstyle="box-shadow:10px8px20px#444;"></div><divsty

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论