css背景图片属性

基础代码:

div {width: 200px;height: 200px;background: url(./css-logo.png);
}<div></div>

1、background-repeat:默认是repeat

        设置背景图片在容器内是否平铺。

        

background-repeat: repeat-y;
background-repeat: repeat-x;
background-repeat: no-repeat;

2、background-position:可使用关键字或坐标(数字+单位,正负均可;水平方向,正数向右,垂直方向,正数向下。)

        注:设置时可设置两个值,如center top,若两个值相同,可简写为center。

background-position: 100px 100px;
background-position: right;
background-position: center;
background-position: left;
background-position: bottom;
background-position: top;

3、background-size:设置背景图片大小(可设置为关键字:cover、contain;百分比-根据盒子尺寸计算大小;数字+单位)

        contain:等比例缩放,以完全装入,可能显示空白;

        cover:等比例缩放,以完全覆盖,可看不全。

background-size: 50px;
background-size: 50%;
background-size: contain;
background-size: cover;

4、background-attachment:fixed,背景不会随元素的内容滚动。

background-attachment: fixed;

小贴士:

大背景图一般设置为background-repeat: no-repeat;background-position: center top;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/501119.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL Strict Mode is not set for database connection ‘default‘

在使用 DJango 框架执行迁移文件的命令时&#xff0c;可以看到出现如下警告&#xff1a; (ll_env) D:\workspace\workspace-mengll\learning-log>python manage.py migrate System check identified some issues: WARNINGS: ?: (mysql.W002) MySQL Strict Mode is not set …

Linux——进程控制(一)进程的创建与退出

目录 一、进程创建 1.写时拷贝 2.创建多个进程 二、进程终止 1.main函数的返回值 2.bash中的$? 3.自定义退出码 4.C语言的错误码 5.错误码与退出码的区别 6.代码异常终止 7.exit函数 8.总结 一、进程创建 在之前&#xff0c;我们学过linux中的非常重要的函数——…

人工智能_大模型010_Centos7.9中CPU安装ChatGLM3-6B大模型_安装使用_010---人工智能工作笔记0145

从一个空的虚拟机开始安装: https://www.modelscope.cn/models/ZhipuAI/chatglm3-6b/files 可以看到这里有很多的数据文件,那么这里 这里点击模型文件就可以下载,这个就是chatglm3-6B的文件,需要点击每个文件,然后点击右边的下载,把文件都下载下来 右侧有下载按钮.点击下载可…

android TextView 实现富文本显示

android TextView 实现富文本显示&#xff0c;实现抖音直播间公屏消息案例 使用&#xff1a; val tvContent: TextView helper.getView(R.id.tvContent)//自己根据UI业务要求&#xff0c;可以控制 图标显示 大小val levelLabel MyImgLabel( bitmap 自己业务上的bitmap )va…

阿里云中小企业扶持权益,助力企业开启智能时代创业新范式

在数字化浪潮的推动下&#xff0c;中小企业正面临着转型升级的重要关口。阿里云深知中小企业的挑战与机遇&#xff0c;特别推出了一系列中小企业扶持权益&#xff0c;旨在帮助企业以更低的成本、更高的效率拥抱云计算&#xff0c;开启智能时代创业的新范式。 一、企业上云权益…

GEE必须会教程—影像数据的区间赋值、插值与比较筛选

影像数据的操作方法比较多&#xff0c;学到今天&#xff0c;至少我们已经学会了如何定义一个影像&#xff0c;以及如何利用Image封装的函数方法进行操作。接下来&#xff0c;我们继续看Image的影像操作方法。 A.定义波段的数据格式 在编程语言中&#xff0c;我们需要根据数据…

新王炸:文生视频Sora模型发布,能否引爆AI芯片热潮

前言 前方高能预警&#xff0c;Sora来袭&#xff01; 浅析Sora的技术亮点 语言模型中构建关键词联系 视频素材分解为时空碎片 扩散模型DiT Not for play, But change world! OpenAI的宏大目标 未来已来&#xff0c;只是尚未流行 Sora的成本与OpenAI的7万亿美金豪赌 算…

【Java设计模式】二、单例模式

文章目录 0、单例模式1、饿汉式2、懒汉式3、双重检查4、静态内部类5、枚举6、单例模式的破坏&#xff1a;序列化和反序列化7、单例模式的破坏&#xff1a;反射8、单例模式的实际应用 设计模式即总结出来的一些最佳实现。GoF(四人组) 书中提到23种设计模式&#xff0c;可分为三大…

阿里云降价!云数据库277元一年,价格下调折扣对照表

2024年阿里云百款产品直降&#xff0c;平均降幅20%&#xff0c;不只是云服务器&#xff0c;也包括云数据库&#xff0c;云数据库涉及产品RDS&#xff08;MySQL、PostgreSQL、MariaDB&#xff09;、Redis社区版、MongoDB、ClickHouse社区兼容版。阿里云百科aliyunbaike.com分享阿…

使用Docker搭建一款实用的个人IT工具箱——It-Tools

作为程序员&#xff0c;在日常工作中&#xff0c;需要借助一些工具来提高我们工作效率&#xff0c;IT-Tools是为开发人员度身打造的一套便捷在线工具。它提供全面功能&#xff0c;使开发者能以更高效方式完成任务。经由IT-Tools&#xff0c;开发人员能轻松应对各类技术挑战&…

【GPU驱动开发】- AST简介

前言 不必害怕未知&#xff0c;无需恐惧犯错&#xff0c;做一个Creator&#xff01; AST&#xff0c;抽象语法树&#xff0c;是一种包含丰富语义信息的格式&#xff0c;其中包括类型、表达式树和符号等。 TranslationUnitDecl&#xff1a;该类表示一个输入源文件 ASTContext&…

ssm656基于JAVA的校园失物招领平台的设计与实现

** &#x1f345;点赞收藏关注 → 私信领取本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345;** 一 、设计说明 1.1 课题…