css中的background属性

news2024/11/25 2:24:05

文章目录

  • 一：background-repeat
  • 二：background-position
  • 三：background缩写方式
  • 三：background-size
  • 四：background-origin
  • 五：background-clip

在日常前端开发中，经常需要进行背景或背景图的处理。但是大多数前端er并未真正清楚背景的正确使用方式。经过本章的学习，相信你一定可以解决99%的背景处理问题。
一：简单使用
背景颜色和背景图片是可以共同出现的 

 div {
    width: 300px;
    height: 300px;
    background-color: red;
    background-image: url(./imgs/1.jpg);
    background-repeat: no-repeat; 
   }

在这里插入图片描述

一：background-repeat

background-repeat决定背景图片的平铺方式

background-repeat:repeat (默认值)
background-repeat:no-repeat (不平铺)
background-repeat:repeat-x （水平方向平铺）
background-repeat:repeat-y （垂直方向平铺）
  1. repeat

默认情况下，如果背景图片不能铺满整个盒子时，系统会在水平和垂直方向同时平铺直到覆盖整个盒子

div {
  width: 300px;
  height: 300px;
  background-color: red;
  background-image: url(./imgs/1.jpg);
  background-repeat: repeat; 
 }

在这里插入图片描述
2.repeat-x

如果背景图片不能将盒子的水平方向铺满，则在水平方向采取平铺处理直到铺满盒子的水平方向。

div {
  width: 300px;
  height: 300px;
  background-color: red;
  background-image: url(./imgs/1.jpg);
  background-repeat: repeat-x; 
 }

在这里插入图片描述
3.repeat-y

如果背景图片不能将盒子的垂直方向铺满，则在垂直方向采取平铺处理直到铺满盒子的垂直方向。

div {
  width: 300px;
  height: 300px;
  background-color: red;
  background-image: url(./imgs/1.jpg);
  background-repeat: repeat-y; 
 }

在这里插入图片描述

二：background-position

background-positiont决定背景图片在盒子区域的定位位置。其方位由水平和垂直决定

1.px设置
px决定了背景图片在盒子水平和垂直方向偏移指定px的距离。

div {
  width: 300px;
  height: 300px;
  background-color: red;
  background-image: url(./imgs/1.jpg);
  background-repeat: no-repeat;
  background-position: 100px 100px; 
 }

在这里插入图片描述
2.方位词

水平方向:left,center,right

垂直方向:top,center,bottom

背景图居中显示

div {
  width: 300px;
  height: 300px;
  background-color: red;
  background-image: url(./imgs/1.jpg);
  background-repeat: no-repeat;
  background-position: center center; 
 }

在这里插入图片描述
3.比例

水平方向= |盒子宽-图片宽| * scale

垂直方向= |盒子高-图片高| * scale

水平和垂直方向的比例偏移位置是按照上面公式计算完成。

如下是背景图居中显示的设置方式

div {
  width: 300px;
  height: 300px;
  background-color: red;
  background-image: url(./imgs/1.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%; 
 }

在这里插入图片描述

三：background缩写方式

background有背景颜色，背景图片，是否平铺等多种样式，为了简化css样式，系统提供了背景的简写方式
background:color url repeat postion
复制代码

背景的简写可以任意省略其中几个属性

三：background-size

background-size决定背景图在盒子中显示的具体大小，属性值需要同时设置背景图的宽和高。

1.具体px

直接指定了背景图的宽和高

设置宽高存在背景图变形问题：我们都清楚每张图片都有自己原始的像素，如果我们每次都直接指定其宽和高那么图片的宽和高直接被压缩到指定像素，图片会存在变形的问题，这样十分影响用户体验。

  div {
    width: 300px;
    height: 300px;
    background-color: red;
    background-image: url(./imgs/1.jpg);
    background-repeat: no-repeat;
    background-size: 200px 50px;
   }

在这里插入图片描述
2. 百分比

百分比是相对于盒子的宽和高决定

百分比也存在背景图变形问题

  div {
    width: 300px;
    height: 300px;
    background-color: red;
    background-image: url(./imgs/1.jpg);
    background-repeat: no-repeat;
    background-size: 50% 10%;
   }

在这里插入图片描述
3.auto

如果宽度是具体数值，高度设置auto,则背景图片的高会根据宽度数值等比拉伸
如果高度是具体数值，宽度设置auto,则背景图片的宽会根据高度数值等比拉伸
如果宽高都设置auto,直接使用原背景图的宽高

如下图所示，图片的高度随着宽度等比拉伸，并未出现图片变形问题。

    div {
      width: 300px;
      height: 300px;
      background-color: red;
      background-image: url(./imgs/1.jpg);
      background-repeat: no-repeat;
      background-size: 200px auto;
     }

在这里插入图片描述
4.cover
cover英文意思覆盖，那么其涵义就是要求背景图片覆盖整个盒子。

规则

选择背景图片的宽和高较小的一方
选择背景图小的一边作为参考，进行背景图的放大或缩小，直到背景图小的一方刚好填充盒子，此时背景图大的一方也会填充盒子。

特点

宽和高等比拉伸或缩小填满整个盒子，宽和高必须同时填满盒子

图片不变形

  div {
    width: 300px;
    height: 300px;
    background-color: red;
    background-image: url(./imgs/1.jpg);
    background-repeat: no-repeat;
    background-size:cover;
   }

在这里插入图片描述
5.contain
contain,要求背景图片的宽和高必须满足其中一个覆盖盒子就行，当图片宽和高都小于盒子时图片会被等比拉伸，如果图片宽或高大于等于盒子宽或者高就停止拉伸。

规则

选择背景图片的宽和高较大的一方
选择背景图大的一边作为参考，进行背景图的放大或缩小，直到背景图大的一方刚好填充盒子。忽略背景图小的一方是否填充。

特点

宽和高等比拉伸或缩，宽或者高满足一个和盒子宽高相同就行。

图片不变形

  div {
    width: 300px;
    height: 300px;
    background-color: red;
    background-image: url(./imgs/1.jpg);
    background-repeat: no-repeat;
    background-size: contain;
   }

四：background-origin

background-origin决定了背景图片从盒子的什么位置开始渲染

1.background-origin: padding-box(默认值)

从盒子的padding位置开始

.box{
  margin: 20px auto;
  width: 300px;
  height: 300px;
  padding: 50px;
  border: 50px solid gold;
  background-color: red;
  background-image: url(./imgs/1.jpg);
  background-repeat: no-repeat;
  background-origin: padding-box;
}

在这里插入图片描述
2.background-origin: content-box

从盒子的内容区域位置开始

.box{
  margin: 20px auto;
  width: 300px;
  height: 300px;
  padding: 50px;
  border: 50px solid gold;
  background-color: red;
  background-image: url(./imgs/1.jpg);
  background-repeat: no-repeat;
  background-origin: content-box;
}

在这里插入图片描述
3.background-origin: border-box
从盒子的边框区域位置开始

五：background-clip

background-clip决定了背景颜色从盒子的什么位置开始渲染

background-clip: border-box（从盒子边距开始）
background-clip: content-box（从盒子内容开始）
background-clip: padding-box（默认值，从盒子padding开始）

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

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

相关文章

国民技术N32G430开发笔记（10）- IAP升级 Application 的制作

国民技术N32G430开发笔记（10）- IAP升级 Application 的制作

IAP升级 Application 的制作 1、App程序跟Bootloader程序最大的区别就是， 程序的执行地址变成了之前flash设定的0x08006000处， 大小限制为20KB 所以修改Application工程的ld文件 origin 改成 0x08006000 length 改成0x5000 烧录是起始地址也要改为x0x…
阅读更多...
【chapter30】【PyTorch】[动量与学习率衰减】

【chapter30】【PyTorch】[动量与学习率衰减】

前言： SGD的不足： ①呈“之”字型，迂回前进，损失函数值在一些维度的改变得快（更新速度快），在一些维度改变得慢（速度慢）- 在高维空间更加普遍 ②容易陷入局部极小值和鞍点…
阅读更多...
JVM性能调优监控工具jps、jstack、jmap、jhat、jstat

JVM性能调优监控工具jps、jstack、jmap、jhat、jstat

JDK本身提供了很多方便的JVM性能调优监控工具，除了集成式的VisualVM和jConsole外，还有jps、jstack、jmap、jhat、jstat等小巧的工具，本博客希望能起抛砖引玉之用，让大家能开始对JVM性能调优的常用工具有所了解。 现实企业级Java开…
阅读更多...
【数据架构系列-06】一文搞懂数据模型的3中类型——概念模型、逻辑模型、物理模型

【数据架构系列-06】一文搞懂数据模型的3中类型——概念模型、逻辑模型、物理模型

数据模型就是模拟现实世界的方法论，是通向智慧世界的基石！ 从现实世界发展到智慧世界，要数经历现实世界、信息世界、计算机世界、数据世界、智慧世界五个不同的世界，我们天生具有从混沌的世界抽象信息变为信息世界的能力&#xff…
阅读更多...
《统计学习方法》——EM算法及其推广(上)

《统计学习方法》——EM算法及其推广(上)

引言 EM算法是一种迭代算法，用于含有隐变量的概率模型参数的极大似然估计。 理解EM算法需要很多概率论的知识，所以下面先贴出所需要的知识。便于对后文的理解。 补充知识 期望 对于离散型随机变量 X X X的概率分布为 p i p { X x i } p_ip\{Xx_i\}…
阅读更多...
第八章 集合函数

第八章 集合函数

文章目录 前言一、聚合函数介绍1 、AVG (平均值) 和SUM （求和）函数2 、MIN（最小值）和MAX（最大值）函数3 、COUNT函数问题：用count(*)，count(1)，count(列名)谁好呢? 二、G…
阅读更多...
语义分割学习笔记（一）语义分割前言

语义分割学习笔记（一）语义分割前言

1.什么是语义分割？ 语义分割(semantic segmentation) FCN要对分割对象进行一个大的划分，即分类。如下图，语义分割有树、人、草地大类别的划分。 实例分割(Instance segmentation) Mask R-CNN要对每一个分割类别中的每一个对象也要进行一个细…
阅读更多...
第五章——动态规划2

第五章——动态规划2

线性DP 数字三角形 像二维数组一样，设置行和列，只不过这里的列是斜着的，如圈出来的7，坐标可以表示为(4,2) 集合划分，所有路径可以分成俩类，某点左上方一类，右下方一类。 我们先把7去掉&#xff…
阅读更多...
利用层级式一致性加强进行半监督病理图像分割

利用层级式一致性加强进行半监督病理图像分割

文章目录 Semi-supervised Histological Image Segmentation via Hierarchical Consistency Enforcement摘要方法对学生模型进行有监督学习层级式一致性强化模块Hierarchical Consistency Loss (HC-Loss)以自我为导向的分层一致性损失 实验结果 Semi-supervised Histological I…
阅读更多...
MySQL基础概念和SQL

MySQL基础概念和SQL

目录 1.概念 1.1.什么是MySQL 1.2.关系型数据库、非关系型数据库 1.3.库、表、字段 2.数据类型 2.1.数值 2.2.字符串 2.3.日期/时间 3.结构化查询语言 3.1.DDL 3.2.DML 3.3.DCL 3.4.DQL 3.4.1.结果集 3.4.2.取别名 3.4.3.查列 3.4.4.条件查询 3.4.5.模糊查询…
阅读更多...
做BI财务数据分析，国产BI软件经验更足

做BI财务数据分析，国产BI软件经验更足

不管是为了提高销售额，还是为了提高库存周转、疏通现金流，都离不开数据分析，特别是BI大数据分析可视化。因此这几年来BI软件在各行各业的接受度迅速提升，特别是在财务数据分析方面，国产BI软件更是经验、技术到位。要说…
阅读更多...
【大数据之Hadoop】二十二、Yarn调度器和调度算法

【大数据之Hadoop】二十二、Yarn调度器和调度算法

Hadoop作业调度器主要有三种：FIFO、容量（Capacity Scheduler）和公平（Fair Scheduler）。 Apache Hadoop默认的资源调度器：容量调度器Capacity Scheduler。 CDH框架默认调度器是Fair Scheduler。 1 FIFO 单…
阅读更多...
智能电动自行车充电远程管理系统

智能电动自行车充电远程管理系统

目前市场上现有的户外普通充电桩只是一个用电计量工具，无法形成一个有效的停放充电管理环境。在受到雨、雪、风、暴晒等天气影响下根本无法使用,并且存在极大的安全隐患。同时公共无限的停放也导致充电位置被闲置车辆及杂物堆放占用，经常出现真正需要充电…
阅读更多...
前端面试题 —— CSS （二）

前端面试题 —— CSS （二）

目录 一、transition 和 animation 的区别 二、什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到3x, 2x 这种图片？ 三、margin 和 padding 的使用场景 四、CSS 优化和提高性能的方法有哪些？ 五、display:in…
阅读更多...
大数据编程实验3 熟悉常用的HBase操作

大数据编程实验3 熟悉常用的HBase操作

实验:熟悉常用的HBase操作 1实验目的 理解HBase在Hadoop体系结构中的角色；熟练使用HBase操作常用的Shell命令； 2 实验平台 操作系统：Linux Hadoop版本：3.1.3 HBase版本：2.2.2 JDK版本：1.8 3 实验内容和…
阅读更多...
KDJB-702继保综合检测试验仪

KDJB-702继保综合检测试验仪

一、产品参数 交流电流输出 输出精度：≤0.5A 2mA ＞0.5A 0.2% 相电流输出（有效值）：0～30A 三并电流输出（有效值）：0～900A 相电流长时间允许工作值&#xff…
阅读更多...
java开发的chatGPT机器人系统

java开发的chatGPT机器人系统

ChatGPT机器人发展趋势： 更加个性化：随着数据和技术的不断进步，ChatGPT机器人将能够更加准确地理解用户的需求和偏好，并提供更加个性化的回复和服务。 多语言支持：随着ChatGPT在各个国家和地区的普及&#xff…
阅读更多...
uniapp（vue2）封装子组件

uniapp（vue2）封装子组件

创建子组件 在项目根目录下新建 components 目录，右键选择“新建组件”，创建子组件（这里以 search.vue 举例）并且为同名目录，即 components --> search --> search.vue，这样父组件可以直接使用&…
阅读更多...
C语言-学习之路-01

C语言-学习之路-01

C语言学习之路-01 目录关键字数据类型常量变量声明和定义进制sizeof关键字整型：intshort、int、long、long long字符型：charASCII对照表转义字符数值溢出实型（浮点型）：float、double类型限定符字符串格式化输出和输入 …
阅读更多...
深度学习笔记之稀疏自编码器

深度学习笔记之稀疏自编码器

深度学习笔记之稀疏自编码器 引言引子：题目描述正确答案： A B C D \mathcal A \mathcal B \mathcal C \mathcal D ABCD题目解析 介绍：自编码器欠完备自编码器正则自编码器从先验角度解释稀疏自编码器稀疏自编码器的构建 引言 本节以一道算法…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023