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 ...
随机推荐
- 利用shell脚本快速定位日志
我们平时查日志,在测试环境,日志文件只有几个的情况下,我们可以通过找时间接近的文件然后根据关键词定位报错位置,大不了都查一遍,这都可以忍受.但是在实际的生产环境下,服务器集群部署,每天的日志非常多非常 ...
- php使用inotify扩展监控文件或目录，如果发生改变，就执行指定命令
通过inotify扩展监控文件或目录的变化,如果发生变化,就执行命令. 可以应用于 swoole 中,如果文件发生变化,就执行 kill -USR1 进程PID 来实现热更新. <?php cl ...
- 【LeetCode】2. 两数相加
题目 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表 ...
- Razor_02 第一个应用程序+Model+EF 添加
第一个应用程序+Model+EF 添加 小试牛刀 今天 也试了试 边说边写,但是 有时候 编辑器不给力,或者网路不给力,倒是浪费大家时间,所以今天录制完了就裁切了 部分视频,如果有不清楚的地方,可以留 ...
- JS实现根据两点位置的经纬度获取距离
// 经纬度转换成三角函数中度分表形式. function rad(d) { return d * Math.PI / 180.0; } // 根据经纬度计算距离,参数分别为第一点的纬度,经度:第二点 ...
- vue-render渲染
在页面中基本的渲染页面 这里的p标签会显示 <div id="app"> <p>33333</p> <login></logi ...
- System 类初探
System 类 操作方法 取得当前的系统时间 currentTemiMillis() public static long currenTimeMillis() ; 实例: 统计某些操作的执行时间 ...
- 执行插件的替代方式：用JS调用操作
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复229或者20161028可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...
- sqlserver2008R2 本地不能用localhost连接
问题 在重新安装sql Server2008R2的时候,本地安装完成之后,想用localhost或者127.0.0.1登录的时候发现一直报错,无法连接,以下是解决方案. 打开Sql Server配置管 ...
- Vue.js+cube-ui（Scroll组件）实现类似头条效果的横向滚动导航条
本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...