HTML连载32-背景颜色、背景图片、背景填充
一、背景
1.如何设置标签的背景颜色
（1）在CSS中有一个background-color：属性值；，就是专门用来设置标签的背景颜色。
（2）取值：具体单词、RGB、RGBA、十六进制
例子：
<style>
.p1{
background-color: red;
}
.p2{
background-color: rgb(0,255,0);
}
.p3{
background-color: rgba(0,0,255,1);
}
.p4{
background-color: #00ffff;
}
</style>
</head>
<body>
<p class="p1">我是试练</p>
<p class="p2">我是试练</p>
<p class="p3">我是试练</p>
<p class="p4">我是试练</p>
2.如何设置背景图片？
（1）在CSS中有一个叫做background-image:url();的属性，就是专门用来设置背景图片的。
（2）注意：
i.图片的地址需要放在url（）的括号之中，图片的地址可以是本地的地址，也可以是网络的地址。
ii.如果图片的大小不足以覆盖我们要求的大小，那么就会自动在水平和垂直方向进行平铺和填充。
iii.如果网页上出现了图片，那么浏览器会再次发送请求获取图片
例子：
.p1{
height:600px;
width: 600px;
background-color: red;
background-image:url("image/play_tennis.jpg");
}
.........省略代码........
<p class="p1">我是试练</p>
3.背景平铺：我们如何设置背景图片？
（1）在CSS中有一个叫做background-repeat的属性，就是专门用来控制背景图片的平铺方式的。
取值：
repeat：默认，在水平和垂直方向上都需要平铺。
no-repeat:在水平和垂直方向上都不需要平铺。
repeat-x:只在水平方向上平铺。
repeat-y:只在垂直方向上平铺。
例子：
.p1{
height:1000px;
width: 600px;
background-color: red;
background-image:url("image/play_tennis.jpg");
/*background-repeat:repeat;!*默认情况下就是repeat,这个意思就是图片大小不变，铺满指定的区域即可*!*/
/*background-repeat: no-repeat;!*这个意思就是图片就铺一张，然后有地方没填上的就空着*!*/
background-repeat:repeat-x;
}
.........省略代码........
<p class="p1">我是试练</p>
(3)应用场景：用来做背景的多个填充。通过背景图片的平铺来降低图片的大小，提升网页访问速度
二、源码：
d94_background_color_and_image_and_tile_way.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/d94_background_color_and_image_and_tile_way.html
2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，后台回复“礼包”获取Java大数据学习视频礼
HTML连载32-背景颜色、背景图片、背景填充的更多相关文章
- VC 对话框设置背景颜色和图片
改变背景颜色,有两种方法: 1.在app的初始化函数中调用:void SetDialogBkColor( COLORREF clrCtlBk = RGB(192, 192, 192), COLORRE ...
- Java 设置PDF文档背景——单色背景、图片背景
一般生成的PDF文档默认的文档底色为白色,我们可以通过一定方法来更改文档的背景色,以达到文档美化的作用. 以下内容提供了Java编程来设置PDF背景色的方法.包括2种设置方法: 设置纯色背景色 设置图 ...
- vs code 的背景颜色主题还有背景图片的自定义方法
先说颜色主题吧: 依次点击文件--->首选项---->颜色主题 你就可以看到不同的颜色主题了 如果你还觉得不好看,不满意,不符合你的审美风格 你还可以在插件库里面下载相关插件: THEME ...
- Qt中设置widget背景颜色/图片的注意事项（使用样式表 setStyleSheet()）
在Qt中设置widget背景颜色或者图片方法很多种:重写paintEvent() , 调色板QPalette , 样式表setStyleSheet等等. 但是各种方法都有其注意事项,如果不注意则很容易 ...
- css背景颜色、背景图片，以及列表的多种样式
背景样式 • background-color 设置元素的背景颜色.• background-image 把图像设置为背景.• background-position 设置背景图像的起始位置.• ba ...
- Java 给 PowerPoint 文档添加背景颜色和背景图片
在制作Powerpoint文档时,背景是非常重要的,统一的背景能让Powerpoint 演示文稿看起来更加干净美观.本文将详细讲述如何在Java应用程序中使用免费的Free Spire.Present ...
- 设置 tableview 的背景 颜色 和清空
表示图中Cell默认是不透明的,那么在设置表示图的背景颜色和图片时通常是看不到的 1.给tableView设置背景view UIImageView *backImageView=[[UIImageVi ...
- ie6背景透明的设置方法 ie6背景颜色透明和png图像透明解决方法
IE6浏览器,让我们又爱又恨.爱它的是,可以让我们写的代码的时候,可以更标准,恨的是,它有太多无厘头的IE6常见bug(详情点击),让我们焦头烂额.现在现在用百度浏览器调查,国内占有率不到6%了,但是 ...
- android中在java代码中设置Button按钮的背景颜色
android中在java代码中设置Button按钮的背景颜色 1.设置背景图片,图片来源于drawable: flightInfoPanel.setBackgroundDrawable(getRes ...
- Java设置PPT幻灯片背景——纯色、渐变、图片背景
PPT幻灯片生成时,系统默认是无色背景填充,幻灯片设计需要手动设置背景效果,可设置颜色填充或者图片背景填充.本文将对此介绍具体实现方法. 使用工具:Free Spire.Presentation fo ...
随机推荐
- IT兄弟连 HTML5教程 HTML5的靠山 RFC、WHATWG是什么WEB的新标准
RFC是什么 RFC文档也称请求注解文档(Requests for Comments,RFC),这是用于发布Internet标准和Internet其他正式出版物的一种网络文件或工作报告,内容和Inte ...
- 【Linux命令】setterm命令修改虚拟机颜色显示（目录及背景颜色）
VMware设置目录及颜色显示 进入linux界面,默认背景为黑色,字体为白色 一.setterm命令 setterm向终端写一个字符串到标准输出,调用终端的特定功能.在虚拟终端上使用,将会改变虚拟终 ...
- wp.editor.initialize 配置案例
wp.editor.initialize ( 'EditorTextArea' , { tinymce: { wpautop: to true , theme: 'modern' , skin: 'l ...
- SpringBoot开发案例之mail中文附件名字乱码
最近在开发一个邮件发送多附件的微服务,使用的是org.springframework.mail.javamail.JavaMailSender;包下面的JavaMailSender 但是发送出来的附件 ...
- 压缩json的一些方式
有时候系统之间的交互需要传递报文,但是报文的量有时候是巨大的,会占用很大的贷款, 或者有时候是通过加密进行传递比如:RSA非对称加密,如果这样的话,解密方就会花费很多的时间进行解密.因为RSA加密安全 ...
- Python GUI开发，效率提升10倍的方法！
1 框架简介 这个框架的名字叫 PySimpleGUI,它完全基于Python语言,能非常方便地开发GUI界面,代码量相比现有框架减少50%到90%.并且,它提供了极为友好的Python风格的接口,大 ...
- DevExpress的下拉框控件ComboBoxEdit控件的使用
场景 Winform控件-DevExpress18下载安装注册以及在VS中使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1 ...
- charles突然不能抓取PC请求解决办法
我在使用charles的时候,突然一天不能抓取PC请求了,原来是我本地开启了手动代理设置,且手动代理的端口号和charles的端口号不一致导致.
- arcgis api 4.x for js 结合 react 入门开发系列react全家桶实现加载天地图（附源码下载）
基于两篇react+arcgis的文章介绍,相信大家也能体会两者的开发区别了.在“初探篇”中作者也讲述了自己的选择,故废话不多说,本篇带大家体验在@arcgis/webpack-plugin环境下,使 ...
- iOS安全攻防（一）：Hack必备的命令与工具
转自:http://blog.csdn.net/yiyaaixuexi/article/details/8288077 你的应用正在被其他对手反向工程.跟踪和操作!你的应用是否依旧裸奔豪不防御? 郑重 ...