首页 > 编程语言 >视频直播系统源码,CSS3如何调整背景图片大小

视频直播系统源码,CSS3如何调整背景图片大小

时间:2023-04-19 14:13:14浏览次数:36  
标签:CSS3 直播 background 源码 背景图片 size

视频直播系统源码,CSS3如何调整背景图片大小

1.length

length:设置背景图片的高度与宽度。第一个值设置宽度,第二个值为高度。如果只给出第一个值,那么第二值则设置为auto(自动)。

 

举例,将背景图片改为20emx20em(默认1px = .05em)

 


            width: 30em;
            height: 22em;
            background: greenyellow;
            background-size:20em 20em;
            background-image: url("src/assets/csdn/bg.jpg");
            background-repeat: no-repeat;

2.percentage

percentage:将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值为高度,各个值之间以空格 隔开指定高和宽,以逗号 , 隔开指定多重背景。如果只给出一个值,第二个是设置为auto(自动)。

 


 background-size:80% 70%;

3.cover

cover:保持图像的横纵比将图像缩放成完全覆盖背景定位区域的最小大小。

 


background-size:cover;

 

4.contain

contain:保持图像的横纵比将图像缩放成适应背景区域的最大大小。

 


background-size:contain;

 

以上就是视频直播系统源码,CSS3如何调整背景图片大小, 更多内容欢迎关注之后的文章

 

标签:CSS3,直播,background,源码,背景图片,size
From: https://www.cnblogs.com/yunbaomengnan/p/17333088.html

相关文章

  • 提高kafka消费速度之从源码去了解Spring-kafka的concurrency参数
    网上看到这篇文章,觉得很不错,这里转载记录一下。转自:提高kafka消费速度之从源码去了解Spring-kafka的concurrency参数-简书第一部分、引言    在spring应用中,如果我们需要订阅kafka消息,通常情况下我们不会直接使用kafka-client,而是使用了更方便的一层封装spring-kafk......
  • springboot项目 宿舍管理系统 (源码+数据库文件+1w字论文+ppt)
    来了就点个赞再走呗,即将毕业的兄弟有福了文章底部获取源码springboot项目宿舍管理系统(源码+数据库文件+1w字论文+ppt)技术框架:java+springboot+vue+mysql后端框架:SpringBoot、SpringMVC、MyBatisPlus前端界面:vue、BootStrap、jQuery、ajxs系统共分为三种用户系统主要功......
  • 【Vue2.x源码系列06】计算属性computed原理
    上一章Vue2异步更新和nextTick原理,我们介绍了JavaScript执行机制是什么?nextTick源码是如何实现的?以及Vue是如何异步更新渲染的?本章目标计算属性是如何实现的?计算属性缓存原理-带有dirty属性的watcher洋葱模型的应用初始化在Vue初始化实例的过程中,如果用户options选......
  • java学习日记20230414-HashSet源码
    HashSetHashSet底层是HashMap添加一个元素时,先得到Hash值,会转化成索引值;找到存储数据表table,看这个索引位置是否存放元素;如果没有直接加入如果有,调用equals比较,如果相同放弃添加,如果不同,则添加到最后在java8中,如果一条链表的元素个数到达TREEIFY_THRESHOLD(默认是8)(table表......
  • 源码共读|yocto-queue 队列 链表
    前言Yocto-queue是一种允许高效存储和检索数据的数据结构。它是一种队列类型,是一个元素集合,其中的项被添加到一端并从另一端移除。它被设计用来操作数据量很大的数组,在你需要使用大量的Array.push、Array.shift操作时,Yocto-queue有更好的性能表现。仓库地址:sindresorhus/yo......
  • 【Python毕业设计】基于Python+Flask+MySQL的学生信息管理系统(附完整源码)
    1、项目说明基于python+Flask+mysql的学生信息管理系统项目实战项目需要安装pycharm专业版,mysql数据库以及项目所需的所有模块创建数据库名称db_online_notes,然后执行sql文件生成数据表和数据项目需要安装flask,pymysql以及其他的一些模块安装命令如下:pipinstall-ihttps://......
  • vue2源码-八、依赖收集的过程
    依赖收集的过程前言使用真实节点替换原始节点,主要涉及以下步骤:1.新老节点的更新方案。2.虚拟节点与真实节点映射。3.实现新老节点的替换。依赖收集已经完成了Vue的两大核心部分:响应式数据和数据渲染,即完成了整个Vue的初始化流程:当newVue()时,执行_init初始化,通过moun......
  • OpenHarmony源码解析之系统服务管理子系统
    1预备知识Linux中主要的IPC机制有:管道(pipe)、信号(signal)、信号量(semophore)、消息队列(Message)、共享内存(ShareMemory)、套接字(Socket)等。OpenHarmony基于binder驱动封装了一套ipc机制(foundation\communication\ipc)用于实现设备内的跨进程通信。Binder机制通常采用客户端-服务器(Cli......
  • pandas读取Excel核心源码剖析,面向过程仿openpyxl源码实现Excel数据加载
    今天我们将研究pandas如何使用openpyxl引擎读取xlsx格式的Excel的数据,并考虑以面向过程的形式简单的自己实现一下。截止目前本人所使用的pandas和openpyxl版本为:pandas:1.5.2openpyxl:3.0.10今天所有的测试全部基于以下文件:pandas的read_excel核心代码这里我使用pycharm工具对以下代......
  • 客服系统vue源码聊天界面,ajax上传图片功能实现
    在线客服系统的聊天界面上,有上传图片按钮功能,使用js实现ajax上传图片功能html部分,有一个点击事件<divclass="iconExtendBtn"@click="uploadImg"><divclass="elIconel-icon-picture"></div>......