CSS background 背景

news2024/11/19 7:41:12

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.coloradmin.cn/o/919726.html

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

相关文章

【面试专题】Spring篇①

&#x1f4c3;个人主页&#xff1a;个人主页 &#x1f525;系列专栏&#xff1a;Java面试专题 目录 1.你知道 Spring 框架中有哪些重要的模块吗&#xff1f; 2. 谈谈你对 IOC 的认识。 3. 谈谈你对 AOP 的认识。 4.在实际写代码时&#xff0c;有没有用到过 AOP&#xff1f;用…

数字化技术无限延伸,VR全景点亮智慧生活

随着互联网的发展&#xff0c;我们无时无刻不再享受着互联网给我们带来的便利&#xff0c;数字化生活正在无限延伸&#xff0c;各行各业也开始积极布局智能生活。要说智慧生活哪个方面应用的比较多&#xff0c;那应该就是VR全景了&#xff0c;目前VR全景已经被各个行业广泛应用…

PyPI 如何在本地配置访问不同的仓库地址

PyPI 是可以在本地计算机上进行配置来访问远程的仓库地址的。 检查配置文件 检查配置文件使用的命令为&#xff1a; pip config -v list 通过上面的配置文件&#xff0c;我们可以知道 Python 的 PyPI 的配置文件信息。 上面图片显示的是配置文件的扫描路径。 修改 pip.ini…

flink checkpoint时exact-one模式和atleastone模式的区别

背景&#xff1a; flink在开启checkpoint的时候有两种模式可以选择&#xff0c;exact-one和atleastone模式&#xff0c;那么这两种模式有什么区别呢&#xff1f; exact-one和atleastone模式的区别 先说结论&#xff1a;exact-one可以完全做到状态的一致性&#xff0c;而atle…

gorm中正确的使用json数据类型

一、说明 1、JSON 数据类型是 MySQL 5.7.8 开始支持的。在此之前&#xff0c;只能通过字符类型&#xff08;CHAR&#xff0c;VARCHAR 或 TEXT &#xff09;来保存 JSON 文档。现实中也很多人不会采用json的存储方式&#xff0c;直接定义一个字符类型,让前端转换传递进来,返回给…

Spring Boot多环境指定yml或者properties

Spring Boot多环境指定yml或者properties 文章目录 Spring Boot多环境指定yml或者properties加载顺序配置指定某个yml 加载顺序 ● application-local.properties ● application.properties ● application-local.yml ● application.yml application.propertes server.port…

2023前端面试笔记 —— CSS3

系列文章目录 内容链接2023前端面试笔记HTML52023前端面试笔记CSS3 文章目录 系列文章目录前言一、CSS选择器的优先级二、通过 CSS 的哪些方式可以实现隐藏页面上的元素三、px、em、rem之间有什么区别&#xff1f;四、让元素水平居中的方法有哪些五、在 CSS 中有哪些定位方式六…

什么是遗传算法(Genetic Algorithm,简称 GA)?

目录 一、遗传算法介绍二、遗传算法应用场景三、遗传算法具体案列1、求解旅行商问题&#xff08;TSP 问题&#xff09;2、求解一个矩阵中的最大值3、基于遗传算法的图像压缩方法 四、遗传算法重要意义五、生物进化与遗传算法之间的关系 一、遗传算法介绍 遗传算法&#xff08;…

Sketch 98 中文版-mac矢量绘图设计

Sketch是一款专为Mac操作系统设计的矢量图形编辑软件&#xff0c;被广泛应用于UI/UX设计、网页设计、移动应用设计等领域。Sketch提供了各种工具和功能&#xff0c;包括绘图、图形设计、排版等&#xff0c;可以帮助设计师轻松地创建高质量的矢量图形和模型。Sketch的主要特点包…

自动气象站丨自动观测和记录气象信息

所谓自动气象站&#xff0c;是指无需人工就能自动检测多种气象要素&#xff0c;并将数据实时发送给观测中心的气设备。它是填补小区域气象探测数据空白的重要手段。自动气象站主要由传感器、数据采集器、太阳能供电系统、立杆组成&#xff0c;可以监测风速、风向、降雨量、空气…

[MyBatis系列①]增删改查

目录 1、基础回顾 2、例子引入 3、映射文件 4、增删改查 4.1、add 4.2、delete 4.3、update 4.4、check 5、核心配置文件 5.1、properties 5.2、typeAliases 5.2.1、自定义 5.2.2、⭐MyBatis自带 5.3、environments 5.3.1、environment 5.3.2、transactionMana…

DataWhale 机器学习夏令营第三期——任务二:可视化分析

DataWhale 机器学习夏令营第三期 学习记录二 (2023.08.23)——可视化分析1.赛题理解2. 数据可视化分析2.1 用户维度特征分布分析2.2 时间特征分布分析 DataWhale 机器学习夏令营第三期 ——用户新增预测挑战赛 学习记录二 (2023.08.23)——可视化分析 2023.08.17 已跑通baseli…

论文解读:Image-Adaptive YOLO for Object Detection in Adverse Weather Conditions

发布时间&#xff1a;2022.4.4 (2021发布&#xff0c;进过多次修订) 论文地址&#xff1a;https://arxiv.org/pdf/2112.08088.pdf 项目地址&#xff1a;https://github.com/wenyyu/Image-Adaptive-YOLO 虽然基于深度学习的目标检测方法在传统数据集上取得了很好的结果&#xf…

【C++数据结构】二叉搜索树

【C数据结构】二叉搜索树 目录 【C数据结构】二叉搜索树二叉搜索树概念二叉搜索树操作二叉搜索树的查找二叉搜索树的插入二叉搜索树的删除二叉搜索树的实现二叉搜索树的应用二叉搜索树的性能分析 作者&#xff1a;爱写代码的刚子 时间&#xff1a;2023.8.22 前言&#xff1a;二…

MySQL数据库管理操作

MySQL常用的数据类型 int&#xff1a;整型 用于定义整数类型的数据float&#xff1a;单精度浮点4字节32位准确表示到小数点后六位double&#xff1a;双精度浮点8字节64位char&#xff1a;固定长度的字符类型用于定义字符类型数据。Char如果存入数据的实际长度比指定长度要…

前端工程化概述

软件工程定义&#xff1a;将工程方法系统化地应用到软件开发中 前端发展历史 前端工程化的发展历史可以追溯到互联网的早期阶段&#xff0c;随着前端技术的不断演进和互联网应用的复杂化&#xff0c;前端工程化也逐渐成为了前端开发的重要领域。以下是前端工程化的主要发展里程…

诚迈科技子公司智达诚远与Unity中国达成合作,打造智能座舱新时代

2023 年 8 月 23 日&#xff0c;全球领先的实时 3D 引擎 Unity 在华合资公司 Unity 中国举办发布会&#xff0c;正式对外发布 Unity 引擎中国版——团结引擎&#xff0c;并带来专为次世代汽车智能座舱打造的团结引擎车机版。发布会上&#xff0c;诚迈科技副总裁、诚迈科技子公司…

C 实现Window/DOS 键盘监听事件

今天是重新复习C语言实现的第一天&#xff0c;今天想编写C 对Windwos/Dos 键盘事件的学习。但是我在安装Visual Studio 2022 没有安装MFC 框架&#xff0c;今天记录下VS追加 MFC框架。 Visual Studio 2022 追加MFC 1、打开vs&#xff0c;点击创建新项目&#xff0c;右侧滑动框…

【ubuntu】 20.04 网络连接器图标不显示、有线未托管、设置界面中没有“网络”选项等问题解决方案

问题 在工作中 Ubuntu 20.04 桌面版因挂机或不当操作&#xff0c;意外导致如下问题 1、 Ubuntu 网络连接图标消失 2、 有线未托管 上图中展示的是 有线 已连接 &#xff0c;故障的显示 有限 未托管 或其他字符 3、 ”设置“ 中缺少”网络“选项 上图是设置界面&#xff0c…

Excel 分组排名

分组排名 公式&#xff1a;SUMPRODUCT((A:AA2)*(C:C>C2)) 1 降序&#xff1a;> 改为 < ⚠️注意1&#xff1a;此处空值参与排名&#xff1b;不参与排名则公式改为&#xff1a;IF(C2“”,“”,SUMPRODUCT((A:AA2)*(C:C>C2)) 1) ⚠️注意2&#xff1a;相同值的项…