CSS background 背景

background属性为元素添加背景效果。

它是以下属性的简写,按顺序为:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

以下所有示例中的花花.jpg图片的大小是48×48


1 background-color

background-color指定元素的背景色。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 背景色 Demo</title><style>body {margin: 0;padding: 0;}.container {width: 200px;height: 200px;background-color: #f0f0f0;}.box {width: 100px;height: 100px;background-color: #f00;}</style>
</head>
<body><div class="container"><div class="box"></div></div>
</body>
</html>

在这里插入图片描述


2 background-image

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 背景图片 Demo</title><style>body {margin: 0;padding: 0;}.bg {width: 96px;height: 96px;background-image: url('./花花.png')}</style>
</head><body><div class="bg"></div>
</body></html>

在这里插入图片描述

背景图片默认是重复的(repeat)。


3 background-repeat

它具有以下值。

1)默认值repeat

repeat会裁剪重复图片超出的部分。

.bg{width: 120px;height: 96px;background-repeat:repeat;
}

在这里插入图片描述

2)space

space是无裁剪的重复。

其重复原理:

  • 如果图片不能刚好放下,剩余长或宽将均匀分布在图片之间。
  • 第一张图片一定从左上方的顶点位置开始排列。
  • 如果图片大小超出容器大小,那么将被裁剪。
.bg{width: 120px;height: 96px;background-repeat:space;
}

在这里插入图片描述

.bg{width: 160px;height: 96px;background-repeat:space;
}

在这里插入图片描述

3)round

round是自适应重复,相比较于space,它会根据元素与图片的大小关系拉伸或缩小图片。

比如说,一个图片长为 x x x,元素长为 X X X n x ≤ X ≤ m x nx \leq X \leq mx nxXmx,如果 X X X更靠近 n x nx nx,那么图片将被放大,如果 X X X更靠近 m x mx mx,那么图片将被缩小。

4)no-repeat

no-repeat设置图片不允许重复。


4 background-attachment

background-attachment决定图片的滚动行为。

其值包括:

scroll(默认值):背景图片随页面滚动而滚动。

在这里插入图片描述

fixed:背景图片不会随页面滚动而滚动,而是相对于视口的原点(左上角)固定。

在这里插入图片描述

我们观察到这两个元素的背景图片是重叠在一起了。

local:不随页面滚动,但随元素内部滚动而滚动。

在这里插入图片描述

5 background-position

background-position用于设定图片的位置,其值类型如下:

.bg{/*关键字*/background-position:top;background-position:bottom;background-position:center;background-position:left;background-position:right;/*百分比值*/background-position:50% 50%;/*长度值*/background-position:10cm 10cm;/*边界偏移值*/background-position:top 10em left 10px;/*全局值*/background-position:inherit; /*继承父元素*/background-position:initial; /*设置为初始值,默认*/background-position:revert; /*重置为样式表中的值*/background-position:unset; /*重置为初始值,如果父元素背景位置有定义,继承父元素的值*/
}

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

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

相关文章

解决docker无法执行定时任务问题

背景 在docker里面想创建定时任务&#xff0c;但是发现时间到了并没有执行&#xff0c;第一时间想到应该是没有开启crond服务&#xff0c;然后执行systemctl status crond.service报错如下所示&#xff1a; System has not been booted with systemd as init system (PID 1).…

ReactNative 密码生成器实战

效果展示图 使用插件 Formik 负责表单校验、监听表单提交、数据校验错误信息展示 Yup 负责表单校验规则 分析页面 从上述的展示图我们可以看到的主要元素有&#xff1a;输入框、单选按钮和按钮。其中生成的密码长度不可能很大也不可能为负数和 0&#xff0c;所以我们可以限…

QGraphicsItem的缩放

QgarphicsItem是Qt视图体系中的项。QGraphicsItem本身是不支持鼠标拖动来缩放的&#xff0c;本文介绍如何通过更改鼠标事件来修改项的大小。下文代码实现的功能为&#xff1a;按住shift&#xff0c;再用鼠标拖动&#xff0c;可以改变Box的大小。 定义类Boxclass Box:public QG…

5.6 汇编语言:汇编高效数组寻址

数组和指针都是用来处理内存地址的操作&#xff0c;二者在C语言中可以互换使用。数组是相同数据类型的一组集合&#xff0c;这些数据在内存中是连续存储的&#xff0c;在C语言中可以定义一维、二维、甚至多维数组。多维数组在内存中也是连续存储的&#xff0c;只是数据的组织方…

解决问题:如何在 Git 中查看提交历史

可以使用以下命令查看 Git 中的提交历史&#xff1a; git log这将显示当前分支上的所有提交历史。每个提交的输出包括提交哈希&#xff08;SHA-1 值&#xff09;、作者、日期和提交注释。 您也可以添加一些选项&#xff0c;以获取更详细的提交历史&#xff1a; --oneline 显示…

idea的断点调试

1、行断点 首先在代码的最左侧点击会显示红色的圆圈 第二步在main方法中右键选中debug run进行运行 会出现下面图片的情况 出现上图之后&#xff0c;点击console 下一步 这个时候就可以看到调试的结果了 6、方法调用栈&#xff1a;这里显示了该线程调试所经过的所有方法&…

“深入解析JVM内部结构与工作原理:揭秘Java虚拟机的奥秘“

标题&#xff1a;深入解析JVM内部结构与工作原理&#xff1a;揭秘Java虚拟机的奥秘 摘要&#xff1a;本文将深入探讨Java虚拟机&#xff08;JVM&#xff09;的内部结构和工作原理&#xff0c;帮助开发者更好地理解JVM的运行机制&#xff0c;从而提高Java程序的性能和稳定性。 …

C语言小白急救 指针进阶讲解1

文章目录 指针一、 字符指针二、 指针数组三、数组指针1.数组的地址2.数组指针3.数组指针的应用 四、数组参数、指针参数1. 一维数组传参2.二维数组传参3.一级指针传参4.二级指针传参 五、函数指针1.函数的地址2.函数指针3.练习 指针 指针的概念&#xff1a; 1.指针就是个变量…

Redis性能配置优化

1、内存优化 Redis的性能取决于可用内存的大小。如果内存不足&#xff0c;Redis将开始交换&#xff08;swap&#xff09;&#xff0c;这会极大影响性能。因此&#xff0c;首先我们需要确保Redis所用内存的数量合理。 对于合理的内存使用&#xff0c;我们需要对Redis的maxmemory…

跨越边界:从前端切图仔走进iOS开发(Swift版--上集)

本文简介 点赞 关注 收藏 学会了 本文将以前端开发者的视角&#xff0c;和各位工友进入iOS开发的世界。 本文以实战为导向&#xff0c;快速掌握iOS开发这个技能。 无论你是想要扩展技能领域&#xff0c;还是对iOS开发充满好奇&#xff0c;花一个下午学习本文都能打开iOS开…

微服务中间件--http客户端Feign

http客户端Feign http客户端Feigna.Feign替代RestTemplateb.自定义Feign的配置c.Feign的性能优化d.Feign的最佳实践分析e.Feign实现最佳实践(方式二) http客户端Feign a.Feign替代RestTemplate 以前利用RestTemplate发起远程调用的代码&#xff1a; String url "http:…

【ARM】Day9 cortex-A7核I2C实验(采集温湿度)

1. 2、编写IIC协议&#xff0c;采集温湿度值 iic.h #ifndef __IIC_H__ #define __IIC_H__ #include "stm32mp1xx_gpio.h" #include "stm32mp1xx_rcc.h" #include "led.h" /* 通过程序模拟实现I2C总线的时序和协议* GPIOF ---> AHB4* I2C1_S…

Baidu World 2023,定了!

1. 定了&#xff0c;Baidu World 2023 终于定了&#xff0c;今年的 Baidu World 将会于 2023-10-17 日在北京首钢园正式召开&#xff0c;主题为『生成未来 / PROMPT THE WORLD』&#xff0c;这也是近4年来 Baidu World 再次恢复线下举行。 有些小伙伴们如果还不知道什么是 Baid…

tda4 videnc-test-app: CONTINUOUS and STEPWISE FRAMEINTERVALS not supported

/* videnc-test-app */ https://git.ti.com/cgit/jacinto7_multimedia/ git clone https://git.ti.com/git/jacinto7_multimedia/videnc-test-app.git // 编译 ./autogen.sh ./configure --enable-maintainer-mode --buildi386-linux --hostaarch64-none-linux CC/home/share…

GMS基本模块TIN、Solids、Modflow2000/2005、MT3DMS、MODPATH。及其在地下水流动、溶质运移、粒子追踪方面的应用

解决地下水数值模拟技术实施过程中遇到的困难&#xff0c;从而提出切实可行的环境保护措施&#xff0c;达到有效保护环境、防治地下水污染&#xff0c;推动经济社会可持续发展的目的。 &#xff08;1&#xff09;水文地质学&#xff0c;地下水数值模拟基础理论&#xff1b;&am…

Kotlin 中的 协程 基础篇

一、什么叫协程 协程可以称为轻量级线程&#xff0c;线程代码块&#xff1b; 二、GlobalScope 协程 CoroutineScope (协程作用域) 的上下文中通过 launch、async 等构造器来启动。GlobalScope ,即全局作用域内启动了一个新的协程&#xff0c;这意味这该协程的生命周期只受整…

CSDN编程题-每日一练(2023-08-23)

CSDN编程题-每日一练(2023-08-23) 一、题目名称:圆小艺二、题目名称:连续子数组的最大和三、题目名称:投篮一、题目名称:圆小艺 时间限制:1000ms内存限制:256M 题目描述: 最近小艺酱渐渐变成了一个圆滑的形状-球!! 小艺酱开始变得喜欢上球! 小艺酱得到n个同心圆。 …

构建智慧停车场:4G DTU实现无线数据高速传输

物联网技术的快速发展使得各种设备能够实现互联互通&#xff0c;无线网络技术给我们的日常生活带来了极大的便利。其中的网络技术如无线WiFi及4G网络已经成为了物联网应用中不可或缺的组成部分。而在工业领域中对4G无线路由器的应用是非常广泛的&#xff0c;人们通过4G工业路由…

意外发现Cortex-M内核带的64bit时间戳,比32bit的DWT时钟周期计数器更方便,再也不用担心溢出问题了

视频&#xff1a; https://www.bilibili.com/video/BV1Bw411D7F5 意外发现Cortex-M内核带的64bit时间戳&#xff0c;比32bit的DWT时钟周期计数器更方便&#xff0c;再也不用担心溢出问题了 介绍&#xff1a; 看参数手册的Debug章节&#xff0c;System ROM Table里面带Timestam…

【Java】基础练习(十)

1.判断邮箱 输入一个电子邮箱&#xff0c;判断是否是正确电子邮箱地址。 正确的邮箱地址&#xff1a; 必须包含 字符&#xff0c;不能是开头或结尾必须以 .com结尾和.com之间必须有其他字符 (1) Email类&#xff1a; package swp.kaifamiao.codes.Java.d0823; /** 输入一个…