html插入背景图片怎么平铺(html嵌入动态背景的方法)

 2023-07-19  阅读 842  评论 0

摘要:一、背景 1.如何设置标签的背景颜色 (1)在CSS中有一个background-color:属性值;,就是专门用来设置标签的背景颜色。 (2)取值:具体单词、RGB、RGBA、十六进制 例子:

一、背景

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.wf"); } .........省略代码........ <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.wf"); background-repeat:repeat-x; }.........省略代码........<p class="p1">我是试练</p>

(3)应用场景:用来做背景的多个填充。通过背景图片的平铺来降低图片的大小,提升网页访问速度

版权声明:xxxxxxxxx;

原文链接:https://www.fanque.com.cn/aaea6A24LAVJVBw.html

标签: 网络

发表评论:

管理员

  • 内容144525
  • 积分0
  • 金币0
关于我们
l番茄知识网是实用的健康养生科普知识及日常生活保健小常识大全网站,分享春夏秋冬四季健康饮食养生保健小知识、运动对健康的好处、中医养生食疗做法等健康的生活方式及养生之道,学习健康养生百科知识尽在番茄健康养生知识网。
快捷菜单
健康养生知识
联系方式
电话:
地址:
Email:admin@qq.com
注册登录
注册帐号
登录帐号

Copyright © 2022 番茄知识网 Inc. 保留所有权利。 Powered by

页面耗时0.2512秒, 内存占用1.84 MB, 访问数据库18次

鄂ICP备2022009988号-2

  • 我要关灯
    我要开灯
  • 客户电话
    807220904

    工作时间:8:00-18:00

    客服电话

    电子邮件

    admin@qq.com

  • 官方微信

    扫码二维码

    获取最新动态

  • 返回顶部