CSS新手入门笔记整理:CSS背景样式

背景颜色:background-color

语法

background-color:颜色值;

颜色值有两种

  • 一种是“关键字”,指的是颜色的英文名称,如red、green、blue等。参考CSS 颜色名称
  • 另外一种是“十六进制RGB值”,类似“#FBE9D0”形式的值。参考十六进制RGB值

背景图片样式:background-image

语法

background-image:url(图片路径);
  • 引入图片需要一个元素标签充当“容器”。
  • 容器需要有“宽度”与“高度”。
  • 背景图片与图片是不一样的,背景图片是使用CSS来实现,而图片是使用HTML来实现。两者的使用场合也不一样,大多数情况下都是使用图片,不过在某些无法使用图片的场合中,我们就要考虑背景图片形式。
  • 此外还有一点要说明一下:下面这两种引入背景图片的方式都是正确的,一个给路径加上了引号,另外一个没加引号。不过在实际开发中,建议采用不加引号的方式,因为这种方式更加简洁。
/*方式1:路径加上引号*/
background-image: url("img/haizei.png");
/*方式2:路径没加引号*/
background-image: url(img/haizei.png);

背景图片平铺方式:background-repeat

语法

background-repeat:取值;

属性值

说明

repeat

在水平方向和垂直方向上同时平铺(默认值)

repeat-x

只在水平方向(x轴)上平铺

repeat-y

只在垂直方向(y轴)上平铺

no-repeat

不平铺


背景图片位置:background-position

语法

background-position:像素值/关键字;

像素值

语法

background-position:像素值;
  • 水平距离和垂直距离这两个数值之间要用空格隔开,两者取值都是像素值。
  • background-position属性设置的两个值是相对该元素的左上角来说的。


关键字

语法

background-position:关键字;

属性值

说明

top left

左上

top center

靠上居中

top right

右上

left center

靠左居中

center center

正中

right center

靠右居中

bottom left

左下

bottom center

靠下居中

bottom right

右下


背景图片固定方式:background-attachment

语法

background-attachment:取值;

属性值

说明

scroll

随元素一起滚动(默认值)

fixed

固定不动


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

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

相关文章

HT78621 3.5A开关限流降压变换器基本参数信息

HT78621是一款高压降压开关稳压器,可向负载提供高达2A的连续电流。 HT78621 特性: ・宽输入电压: 5V – 60V ・峰值开关电流限值典型3.5A ・Z高1MHz开关频率 ・支持PWM调光控制输入,应用于LED ・集成G端MOSFET的短路保护 ・200μA静态电…

CentOS7 防火墙常用命令

以下是在 CentOS 7 上使用 firewall-cmd 命令管理防火墙时的一些常用命令: 检查防火墙状态: sudo firewall-cmd --state 启动防火墙: sudo systemctl start firewalld 停止防火墙: sudo systemctl stop firewalld 重启防火墙&…

启动 AWS Academy Learner Lab【教学】(Hadoop实验)

🔥博客主页: A_SHOWY🎥系列专栏:力扣刷题总结录 数据结构 云计算 第一部分 创建实例过程 首先,需要创建3台EC2,一台作主节点 (master node),两台作从节点 (slaves node)。 1.镜像选择 EC2&…

如何基于Akamai IoT边缘平台打造一个无服务器的位置分享应用

与地理位置有关的应用相信大家都很熟悉了,无论是IM软件里的位置共享或是电商、外卖应用中的配送地址匹配,我们几乎每天都在使用类似的功能与服务。不过你有没有想过,如何在自己开发的应用中嵌入类似的功能? 本文Akamai将为大家提…

梯度上升和随机梯度上升

目录 梯度上升算法: 代码: 随机梯度上升算法: 代码: 实验: 做图代码: 疑问: 1.梯度上升算法不适应大的数据集,改用随机梯度上升更合适。 2.改进过的随机梯度算法&#xff0…

Android Edittext进阶版(Textfieids)

一、Text fieids 允许用户在 UI 中输入文本,TextInputLayout TextInputEditText。 在 Text fieids 没出来(我不知道)前,想实现这个功能就需要自己自定义控件来实现这个功能。 几年前做个上面这种样式(filled 填充型)。需要多个控件组合 动画才能实现&a…

游戏开发增笑-扣扣死-Editor的脚本属性自定义定制-还写的挺详细的,旧版本反而更好

2012年在官方论坛注册的一个号,居然被禁言了,不知道官方现在是什么辣鸡,算了,大人不记狗子过 ”后来提交问题给CEO了,结果CEO百忙之中居然回复了,也是很低调的一个人,毕竟做技术的有什么坏心思呢…

基于SSM的老年公寓信息管理的设计与实现

末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:采用JSP技术开发 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目&#x…

Clickhouse遇到密码错误如何修改密码

输入错误密码报错 rootDAILACHDBUD001:/var/log# clickhouse-client ClickHouse client version 23.4.2.11 (official build). Connecting to localhost:9000 as user default. Password for user (default): Connecting to localhost:9000 as user default. Code: 516. DB::E…

2023年JetBrains开发调查:Java 8仍广泛使用

开发者生态系统调查是查找和分析实际情况的好方法,而实际情况通常与看似流行或趋势的情况相反。 排名前三: Java8采用率:50%Java17采用率:45%Java11采用率:38% 看到这么多人仍在使用 Java 8(及更早版本&…

如何使用cpolar内网穿透工具实现公网SSH远程访问Deepin

文章目录 前言1. 开启SSH服务2. Deppin安装Cpolar3. 配置ssh公网地址4. 公网远程SSH连接5. 固定连接SSH公网地址6. SSH固定地址连接测试 前言 Deepin操作系统是一个基于Debian的Linux操作系统,专注于使用者对日常办公、学习、生活和娱乐的操作体验的极致&#xff0…

【C语言】深入理解指针(1)

目录 前言 (一)内存与地址 从实际生活出发 地址 内存 内存与地址关系密切 (二)指针变量 指针变量与取地址操作符 指针变量与解引用操作符 指针的大小 指针的运算 指针 - 整数 指针-指针 指针的关系运算 指针的类型的…

C++ 数组

目录 一维数组 一维数组的创建 一维数组的初始化 一维数组的使用 一维数组在内存中的存储 二维数组 二维数组的创建 二维数组的初始化 二维数组的使用 二维数组在内存中的存储 数组越界 一维数组 数组是一组形同类型的集合。 一维数组的创建 数组的创建方式&…

❀dialog命令运用于linux❀

目录 ❀dialog命令运用于linux❀ msgbox部件(消息框) yesno部件(yesno框) inputbox部件(输入文本框) textbox部件(文本框) menu部件(菜单框) fselect部…

哈希与哈希表

哈希表的概念 哈希表又名散列表,官话一点讲就是: 散列表(Hash table,也叫哈希表),是根据关键码值(Key value)而直接进行访问的数据结构。也就是说,它通过把关键码值映射到表中一个位置来访问记…

SpringBoot集成Redis

引入依赖 建议使用 Lettuce 连接驱动 <!--一&#xff1a;Jedis连接驱动缺点&#xff1a;Jedis基于TCP的阻塞性的连接方式1. 阻塞性IO2. 不能异步3. 线程不安全的Lettuce连接驱动优点&#xff1a;Lettuce基于Netty的多路复用的异步非阻塞的连接方式&#xff0c;1. 线程安全2…

公开Java框架开源到Maven中央仓库(避坑)

前言: gpg下载地址&#xff1a;http://www.gnupg.org/download 安装勾选 kleopatra 下载完成验证 gpg --version 当时为了开源Java框架&#xff0c;真的是绞尽脑汁&#xff0c;耗费很多精力查了很多资料&#xff0c;躺了很多坑&#xff0c;最终的结果无不是以发布失败而告终&am…

线程变量引发的session混乱问题

最近不是在救火&#xff0c;就是在救火的路上。 也没什么特别可写的&#xff0c;今天记录下最近遇到的一个问题&#xff0c;个人觉得挺有意思&#xff0c; 待有缘人阅读 言归正传&#xff0c;售后反馈&#xff1a; 营业查询中付款方式为第三方支付的几条银行缴费&#xff0c;创…

ai绘画Midjourney绘画提示词Prompt教程

一、Midjourney绘画工具 SparkAi【无需魔法使用】&#xff1a; SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧&#xff01;本系统使用NestjsVueTypescript框架技术&#xff0c;持续集成AI能力到…

成为AI产品经理——模型稳定性评估(PSI)

一、PSI作用 稳定性是指模型性能的稳定程度。 上线前需要进行模型的稳定性评估&#xff0c;是否达到上线标准。 上线后需要进行模型的稳定性的观测&#xff0c;判断模型是否需要迭代。 稳定度指标(population stability index ,PSI)。通过PSI指标&#xff0c;我们可以获得不…