一、背景

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-背景颜色、背景图片、背景填充的更多相关文章

  1. VC 对话框设置背景颜色和图片

    改变背景颜色,有两种方法: 1.在app的初始化函数中调用:void SetDialogBkColor( COLORREF clrCtlBk = RGB(192, 192, 192), COLORRE ...

  2. Java 设置PDF文档背景——单色背景、图片背景

    一般生成的PDF文档默认的文档底色为白色,我们可以通过一定方法来更改文档的背景色,以达到文档美化的作用. 以下内容提供了Java编程来设置PDF背景色的方法.包括2种设置方法: 设置纯色背景色 设置图 ...

  3. vs code 的背景颜色主题还有背景图片的自定义方法

    先说颜色主题吧: 依次点击文件--->首选项---->颜色主题 你就可以看到不同的颜色主题了 如果你还觉得不好看,不满意,不符合你的审美风格 你还可以在插件库里面下载相关插件: THEME ...

  4. Qt中设置widget背景颜色/图片的注意事项（使用样式表 setStyleSheet()）

    在Qt中设置widget背景颜色或者图片方法很多种:重写paintEvent() , 调色板QPalette , 样式表setStyleSheet等等. 但是各种方法都有其注意事项,如果不注意则很容易 ...

  5. css背景颜色、背景图片，以及列表的多种样式

    背景样式 • background-color 设置元素的背景颜色.• background-image 把图像设置为背景.• background-position 设置背景图像的起始位置.• ba ...

  6. Java 给 PowerPoint 文档添加背景颜色和背景图片

    在制作Powerpoint文档时,背景是非常重要的,统一的背景能让Powerpoint 演示文稿看起来更加干净美观.本文将详细讲述如何在Java应用程序中使用免费的Free Spire.Present ...

  7. 设置 tableview 的背景 颜色 和清空

    表示图中Cell默认是不透明的,那么在设置表示图的背景颜色和图片时通常是看不到的 1.给tableView设置背景view UIImageView *backImageView=[[UIImageVi ...

  8. ie6背景透明的设置方法 ie6背景颜色透明和png图像透明解决方法

    IE6浏览器,让我们又爱又恨.爱它的是,可以让我们写的代码的时候,可以更标准,恨的是,它有太多无厘头的IE6常见bug(详情点击),让我们焦头烂额.现在现在用百度浏览器调查,国内占有率不到6%了,但是 ...

  9. android中在java代码中设置Button按钮的背景颜色

    android中在java代码中设置Button按钮的背景颜色 1.设置背景图片,图片来源于drawable: flightInfoPanel.setBackgroundDrawable(getRes ...

  10. Java设置PPT幻灯片背景——纯色、渐变、图片背景

    PPT幻灯片生成时,系统默认是无色背景填充,幻灯片设计需要手动设置背景效果,可设置颜色填充或者图片背景填充.本文将对此介绍具体实现方法. 使用工具:Free Spire.Presentation fo ...

随机推荐

  1. 【Linux命令】nohup命令用法

    nohup命令用法 当我们想将某个脚本或程序运行在后台的时候.我们一般会在程序或脚本后面添加 & 字符来表示在后台运行,但使用& 运行在后台,当我们将shell窗口关闭时,该脚本或程序 ...

  2. ubuntu 库依赖问题

    安装apt-file, 可以查找各种库依赖的文件,或查找某个app的依赖库: sudo apt install apt-file apt-file update apt-flie search rpc ...

  3. Bag of Tricks for Image Classification with Convolutional Neural Networks

    url: https://arxiv.org/abs/1812.01187 year: 2018 文中介绍了训练网络的一些 tricks, 通过组合训练过程的trick,来提高模型性能和泛化能力,以及 ...

  4. 现代C++实现多种print

    目录 Print Version1 Print Version2 Print Version3 Print Version4 容器的Print tuple容器的print 结语 学习C++的朋友会遇到 ...

  5. 五分钟搞定 HTTPS 配置，二哥手把手教

    01.关于 FreeSSL.cn FreeSSL.cn 是一个免费提供 HTTPS 证书申请.HTTPS 证书管理和 HTTPS 证书到期提醒服务的网站,旨在推进 HTTPS 证书的普及与应用,简化证 ...

  6. Dynamics 365利用HTML页面创建实体记录并同步上传附件

    我是微软Dynamcis 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  7. linux守护进程start-stop-daemon启动服务

    start-stop-daemon #! /bin/sh PATH=/sbin:/bin . /lib/lsb/init-functions do_start () { log_action_msg ...

  8. MySQL数据库（三）锁机制

    MyISAM默认使用表级锁,不支持行级锁 InnoDB默认使用行级锁,也支持表级锁 表级锁:开销小,加锁快:不会出现死锁:锁定粒度大,发生锁冲突的概率最高,并发度最低. 行级锁:开销大,加锁慢:会出现 ...

  9. [Go] gocron源码阅读-go语言web框架Macaron

    gocron源码中使用的是马卡龙框架,下面这个就是安装这个框架,和一般的MVC框架很像go get gopkg.in/macaron.v1git clone https://github.com/go ...

  10. nginx 配置实例-负载均衡

    1.实现效果 (1)浏览器地址栏输入地址 http://www.123.com/edu/a.html,负载均衡效果,平均 8080 和 8081 端口中 2.准备工作 (1)准备两台 tomcat 服 ...