一、背景

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. 07-selenium、PhantomJS（无头浏览器）

    selenium(自动化测试工具可用于在爬虫中解决js动态加载问题) 简介(本质就是模仿浏览器工作) Selenium 是什么?一句话,自动化测试工具.它支持各种浏览器,包括 Chrome,Safar ...

  2. 对并发Map的测试

    /** * ConcurrentHashMap效率最高 */ public class MapTest { public static void main(String[] args) throws ...

  3. PlayJava Day004

    今日所学: /* 2019.08.19开始学习,此为补档. */ JDK 1.6:byte , int , short , char , enum JDK 1.7:byte , int , short ...

  4. 易优CMS:【小白学标签】之empty的基础用法

    [基础用法] 名称:empty 功能:判断某个变量是否为空,可以嵌套到任何标签里面使用,比如:channel.type等 语法: {eyou:empty name='$eyou.field.seo_t ...

  5. SpringBoot（六） SpringBoot整合Swagger2（自动化生成接口文档）

    一:在上篇文章pom增加依赖: <dependency> <groupId>io.springfox</groupId> <artifactId>spr ...

  6. Ubuntu的系统应用

    1:最近在苹果笔记本做了双系统,启动电脑后还是蛮酷的,但是ubuntu系统安好后,没有wifi图标,于是必须连接有线网络,更新数据包才可以. 2:      常用命令 查看软件xxx安装内容#dpkg ...

  7. python函数修饰符@的使用

    python函数修饰符@的作用是为现有函数增加额外的功能,常用于插入日志.性能测试.事务处理等等. 创建函数修饰符的规则:(1)修饰符是一个函数(2)修饰符取被修饰函数为参数(3)修饰符返回一个新函数 ...

  8. SQL学习_SQL函数

    常用的 SQL 函数 1. 算术函数 SELECT ABS(-2),运行结果为 2 SELECT MOD(101,3),运行结果 2 SELECT ROUND(37.25,1),运行结果 37.3 2 ...

  9. [Go] gocron源码阅读-判断是否使用root用户执行

    判断是linux系统,并且uid为0,allowRoot是通过命令行传参传进来的,通过flag包解析出来的,可以使用go run node.go -h看到这些参数 && !allowR ...

  10. github配置ssh及多ssh key问题处理

    一.生成ssh公私钥 用ssh-keygen生成公私钥. $ssh-keygen -t rsa -C "你的邮箱" -f ~/.ssh/id_rsa_mult 在~/./ssh目录 ...