内容简介:《HTML+CSS+JS 网页制作》- 背景样式
本章节介绍背景相关的几个重要的样式,分别是背景颜色样式background-color、背景图像样式background-image、背景重复样式background-repeat以及背景的复合样式background。
背景颜色样式background-color
在CSS中设置背景的颜色是通过background-color样式的,其语法为:
background-color:颜色取值
其中这个颜色取值跟前一章节学的color样式的取值是一样的,即用十六进制数来设置颜色。
例如:
<!doctype html> <html> <head> <title>背景样式</title> <meta charset="utf-8"> <style> body{background-color:#0099CC;} .word{font-family:楷体;font-size:20px;font-weight:bold;color:#FFFFFF;} </style> </head> <body> <div class="word">通通学 - 知识学习与分享的平台</div> </body> </html>
效果:
背景图像样式background-image
在网页设计时,需要背景图像来美化网页,此时就需要用到background-image样式,语法:
background-image:url(图像的地址)
注意:图像的地址可以是绝对地址,也可以是相对地址
例如:
<!doctype html> <html> <head> <title>背景样式</title> <meta charset="utf-8"> <style> .word{font-family:楷体;font-size:20px;font-weight:bold;color:#FFFFFF;} body{background-image:url('./image.jpg');} </style> </head> <body> <div class="word">通通学 - 知识学习与分享的平台</div> </body> </html>
效果:
背景重复样式background-repeat
通过background-repeat样式可以设置图像是否平铺,同时可以设置平铺方式,语法:
background-repeat:取值
该取值分别有以下情况:
no-repeat:表示背景图像不平铺;
repeat:表示背景图像平铺满整个网页;
repeat-x:表示背景图像只在水平方向平铺;
repeat-y:表示背景图像只在垂直方向平铺。
例如:
<!doctype html> <html> <head> <title>背景样式</title> <meta charset="utf-8"> <style> .word{font-family:楷体;font-size:20px;font-weight:bold;color:#FFFFFF;} body{background-image:url('./image02.png');background-repeat:repeat-x;} </style> </head> <body> <div class="word">通通学 - 知识学习与分享的平台</div> </body> </html>
效果:
背景的复合样式background
背景的复合样式background就是将上述的3个样式,一起写在一个样式上,简化样式方式,语法:
background:取值
注意:取值是包括背景颜色、背景图像、背景重复样式,各值之间用空格隔开。
例如:
<!doctype html> <html> <head> <title>背景样式</title> <meta charset="utf-8"> <style> .word{font-family:楷体;font-size:20px;font-weight:bold;color:#FFFFFF;} body{background:#0099CC url('./image02.png') no-repeat;} </style> </head> <body> <div class="word">通通学 - 知识学习与分享的平台</div> </body> </html>
效果:
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
关注微信公众号
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 网页制作用什么软件?制作网页的常用软件工具分享
- 高扩展的在线网页制作平台-码良正式开源
- 码良后端代码正式开源 —— 高扩展网页制作平台
- 1.6 常用CSS样式2:其它样式
- 1.5 常用CSS样式1:文本样式
- CSS 样式防御
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
C# 6.0本质论
[美] Mark Michaelis(马克·米凯利斯)、[美] Eric Lippert(埃里克·利珀特) / 周靖、庞燕 / 人民邮电出版社 / 2017-2-1 / 108
这是C#领域中一部广受好评的名作,作者用一种易于理解的方式详细介绍了C#语言的各个方面。全书共有21章和4个附录(其中哟2个附录从网上下载),介绍了C#语言的数据类型、操作符、方法、类、接口、异常处理等基本概念,深入讨论了泛型、迭代器、反射、线程和互操作性等高级主题,还介绍了LINQ技术,以及与其相关的扩展方法、分部方法、Lambda表达式、标准查询操作符和查询表达式等内容。每章开头的“思维导图”......一起来看看 《C# 6.0本质论》 这本书的介绍吧!