【前端 - CSS】第 18 课 - 背景属性

news2024/11/15 19:31:07

        欢迎来到博主 Apeiron 的博客，祝您旅程愉快 ！ 时止则止，时行则行。动静不失其时，其道光明。

​​​​​​​

 

目录

1、缘起

2、背景属性

2.1、背景图

2.2、背景图平铺方式 

2.3、背景图位置 

2.4、背景图缩放 

2.5、背景图固定

2.6、背景复合属性

3、总结 

1、缘起

        CSS 中的背景属性用于设置 HTML 元素的背景样式。它包括 背景颜色、背景图像、背景位置、背景重复、背景尺寸 等属性。通过这些属性，可以实现不同背景效果，如纯色背景、渐变背景、图像背景以及背景的定位、重复和尺寸调整。

2、背景属性

2.1、背景图

在网页中，使用背景图实现 装饰性 的图片效果。

属性名：background - image（bgi）

属性值：url （背景图 URL）

示例代码：

<style>
      div {
          width: 400px;
          height: 400px;
          background-color: pink;
          background-image: url(./images/Photo12.jpg);
      }
</style>

<body>
    <div>div</div>
</body>

注：在浏览器中，背景图默认平铺的效果。 

2.2、背景图平铺方式 

属性名：background - repeat（bgr）

属性值

属性值效果
no - repeat不平铺
repeat平铺（默认效果）
repeat - x水平方向平铺
repeat - y垂直方向平铺

①  no - repeat 

示例代码： 

<style>
    div {
        width: 400px;
        height: 400px;
        background-color: pink;
        background-image: url(./images/Photo12.jpg);
        background-repeat: no-repeat;
   }
</style>


<body>
    <div>div</div>
</body>

盒子的左上角显示一张背景图。 

②  repeat - x 

示例代码： 

<style>
    div {
        width: 400px;
        height: 400px;
        background-color: pink;
        background-image: url(./images/Photo12.jpg);
        background-repeat: repeat-x;
   }
</style>


<body>
    <div>div</div>
</body>

③  repeat-y 

示例代码： 

<style>
    div {
        width: 400px;
        height: 400px;
        background-color: pink;
        background-image: url(./images/Photo12.jpg);
        background-repeat: repeat-y;
   }
</style>


<body>
    <div>div</div>
</body>

2.3、背景图位置 

属性名：background - position (bgp)

属性值：水平方向位置    垂直方向位置

（1）关键字

关键字位置
left左侧
right右侧
center居中
top顶部
bottom底部

（2）坐标（数字 + px ，正负都可以） 

①  background - position : center  bottom

示例代码： 

<style>
    div {
        width: 400px;
        height: 400px;
        background-color: pink;
        background-image: url(./images/Photo12.jpg);
        background-repeat: repeat-y;

        background-position: center bottom;
   }
</style>


<body>
    <div>div</div>
</body>

②  background-position: 50px -100px; 

示例代码： 

<style>
    div {
        width: 400px;
        height: 400px;
        background-color: pink;
        background-image: url(./images/Photo12.jpg);
        background-repeat: repeat-y;

        background-position: 50px -100px; 
   }
</style>


<body>
    <div>div</div>
</body>

③  background-position: 50px center; 

示例代码： 

<style>
    div {
        width: 400px;
        height: 400px;
        background-color: pink;
        background-image: url(./images/Photo12.jpg);
        background-repeat: repeat-y;

        background-position: 50px center; 
   }
</style>


<body>
    <div>div</div>
</body>

2.4、背景图缩放 

作用：设置背景图大小

属性名：background - size（bgz）

常用属性值：

（1）关键字

        ①  cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见

        ②  contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白

（2）百分比：根据盒子尺寸计算图片大小

（3）数字 + 单位（例如：px）

①  contain

示例代码：

<style>
    div {
        width: 500px;
        height: 300px;
        background-color: pink;
        background-image: url(./images/Photo12.jpg);
        background-repeat: no-repeat;

        background-size: contain;
   }
</style>


<body>
    <div>div</div>
</body>

②  cover 

<style>
    div {
        width: 500px;
        height: 300px;
        background-color: pink;
        background-image: url(./images/Photo12.jpg);
        background-repeat: no-repeat;

        background-size: cover;
   }
</style>


<body>
    <div>div</div>
</body>

③  100% 

示例代码： 

<style>
    div {
        width: 500px;
        height: 300px;
        background-color: pink;
        background-image: url(./images/Photo12.jpg);
        background-repeat: no-repeat;

        background-size: 100%;
   }
</style>


<body>
    <div>div</div>
</body>

注：100%  图片的宽度跟盒子宽度一样，图片的高度按照图片比例等比缩放 

2.5、背景图固定

作用：背景不会随着元素的内容滚动

属性名：background - attachment（bga）

属性值：fixed

示例代码：

<style>
     body {
         bakground-color: pink;
         background-image: url(./images/小王子.jpg);
         background-repeat: no-repeat;

         background-attachment: fixed;
     }
</style>


<body>
    <p>测试文字，撑开 body ，让浏览器有滚动条</p>
    <p>测试文字，撑开 body ，让浏览器有滚动条</p>
    <p>测试文字，撑开 body ，让浏览器有滚动条</p>
    <p>测试文字，撑开 body ，让浏览器有滚动条</p>
    <p>测试文字，撑开 body ，让浏览器有滚动条</p>
    <p>测试文字，撑开 body ，让浏览器有滚动条</p>
    <p>测试文字，撑开 body ，让浏览器有滚动条</p>
    <p>测试文字，撑开 body ，让浏览器有滚动条</p>
    <p>测试文字，撑开 body ，让浏览器有滚动条</p>
    <p>测试文字，撑开 body ，让浏览器有滚动条</p>
    <p>测试文字，撑开 body ，让浏览器有滚动条</p>
    <p>测试文字，撑开 body ，让浏览器有滚动条</p>
    <p>测试文字，撑开 body ，让浏览器有滚动条</p>
    <p>测试文字，撑开 body ，让浏览器有滚动条</p>
    <p>测试文字，撑开 body ，让浏览器有滚动条</p>
    <p>测试文字，撑开 body ，让浏览器有滚动条</p>
    <p>测试文字，撑开 body ，让浏览器有滚动条</p>
    <p>测试文字，撑开 body ，让浏览器有滚动条</p>
    <p>测试文字，撑开 body ，让浏览器有滚动条</p>
    <p>测试文字，撑开 body ，让浏览器有滚动条</p>
    <p>测试文字，撑开 body ，让浏览器有滚动条</p>
    <p>测试文字，撑开 body ，让浏览器有滚动条</p>
    <p>测试文字，撑开 body ，让浏览器有滚动条</p>
    <p>测试文字，撑开 body ，让浏览器有滚动条</p>
    <p>测试文字，撑开 body ，让浏览器有滚动条</p>
</body>

        滚动鼠标滑轮，就会看到只有文字在滚动，而背景图不滚动。 

2.6、背景复合属性

属性名：background （bg）

属性值：背景色  背景图  背景图平铺方式  背景图位置/背景图缩放  背景图固定（空格隔开 各个属性值，不区分顺序）

示例代码：

<style>
      div {
          width: 400px;
          height: 400px;
          background:pink  url(./images/Photo12.jpg)  no-repeat  center
        }
</style>


<body>
    <div>div</div>
</body>

3、总结 

        本期的分享总结就到这里了，如果有疑问的小伙伴儿，我们在评论区交流嗷~~~，笔者必回，我们下期再见啦 ！

博客中难免存在疏漏和错误之处，皆归因于作者水平有限，诚请各位读者不吝指正 ！

< 前端 - CSS >  专栏系列持续更新 ，欢迎订阅关注 ！

 

 

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

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

相关文章

软件开发人员必须阅读的20本书

软件开发人员必须阅读的20本书

本文翻译自国外论坛 medium&#xff0c;原文地址&#xff1a;https://irina-seng.medium.com/top-20-books-a-software-developer-must-read-updated-b24bcc9ee3d 持续学习的心态是软件开发人员想要保持专业相关性并增长自身价值的关键品质。 在这篇博文中&#xff0c;我将推荐…
阅读更多...
dp算法篇Day6

dp算法篇Day6

"垂死坚持啊" 26、环绕字符串中唯一的子字符串 (1) 题目解析 (2) 算法原理 class Solution { public:int findSubstringInWraproundString(string s) {int n s.size();vector<int> dp(n,1);for(int i1; i<n; i){if(s[i-1]1 s[i] || (s[i-1]z && …
阅读更多...
JS 刷新保持iframe页面并支持浏览器前进后退

JS 刷新保持iframe页面并支持浏览器前进后退

参考资料 html5新特性&#xff1a;利用history的pushState等方法来解决使用ajax导致页面后退和前进的问题击按钮切换iframe的src&#xff0c;这个路径如何不会被记录到history中&#xff1f;iframe 后退 浏览器history 问题ajax与HTML5 history pushState/replaceState实例 目…
阅读更多...
Matlab论文插图绘制模板第104期—带缺口的分组箱线图

Matlab论文插图绘制模板第104期—带缺口的分组箱线图

在之前的文章中&#xff0c;分享了Matlab分组箱线图的绘制模板&#xff1a; 进一步&#xff0c;再来分享一下带缺口的分组箱线图的绘制模板。 先来看一下成品效果&#xff1a; 特别提示&#xff1a;本期内容『数据代码』已上传资源群中&#xff0c;加群的朋友请自行下载。有需…
阅读更多...
PyQT5介绍及基本使用

PyQT5介绍及基本使用

文章目录 PyQt51. PyQt5的下载与安装1.1 PyQt5介绍1.2 windows PyQt5的安装 2.PyQt5基本UI2.1 第一个PyQt程序2.2 argv2.3 模块介绍 3.基本UI3.1 按钮QPushButton3.2 文本QLabel3.3 输入框3.4 调整窗口大小3.5 调整窗口显示屏幕中间3.6 设置窗口icon 4.布局4.1 QBoxLayout4.1.1…
阅读更多...
Spring Security系列之授权（Authorization）架构

Spring Security系列之授权（Authorization）架构

文章目录 AuthorizationManagerAuthorizationFilterRequest Matcher AuthorizationManager AuthorizationManager 被授 AuthorizationFilter 调用&#xff0c;负责做出最终的访问控制决定。AuthorizationManager 接口包含两个方法。 default void verify(Supplier<Authent…
阅读更多...
ABBYY FineReader15最新版图片文字识别转换软件

ABBYY FineReader15最新版图片文字识别转换软件

在日常生活中&#xff0c;我们会遇到需要将各种文字、图片、扫描图片等转换为文字的情况。想要轻松解决这些问题&#xff0c;需要使用到OCR文字识别。但对于许多新手来说&#xff0c;OCR文字识别是陌生的。今天小编就给大家介绍一下&#xff0c;OCR文字识别怎么使用&#xff0c…
阅读更多...
RabbitMQ如何保证消息幂等性

RabbitMQ如何保证消息幂等性

用户对于同一操作发起的一次请求或者多次请求的结果是一致的&#xff0c;不会因为多次点击而产生副作用。 举个简单的例子&#xff0c;那就是支付&#xff0c;用户购买商品后支付&#xff0c;支付扣款成功&#xff0c;但是返回结果的时候网络异常&#xff0c;此时钱已经扣了&am…
阅读更多...
DJ8-4 shell 语句的分类、shell 的结构性语句

DJ8-4 shell 语句的分类、shell 的结构性语句

目录 8.7 shell 编程 8.7.1 shell 编程的基本过程 8.7.2 实例 8.7.3 shell 程序和语句 8.8 说明性语句和功能性语句 8.8.1 说明性语句&#xff08;注释行&#xff09; 8.8.2 常用的功能性语句 8.9 结构性语句 8.9.1 条件语句 if 8.9.2 测试语句 test 8.9.…
阅读更多...
什么牌子的电容笔质量好耐用？平板第三方电容笔了解下

什么牌子的电容笔质量好耐用？平板第三方电容笔了解下

苹果的电容笔和普通的电容笔有何区别&#xff1f;其实&#xff0c;就书写情况而言&#xff0c;两者相差不多。只是苹果电容笔生在重量上&#xff0c;更加的沉重&#xff0c;而且还配备了一个特殊的重力传感器&#xff0c;能够准确的感觉到重力对线条的粗细变化。由于苹果这款产…
阅读更多...
手机操作系统的沉浮往事（上）

手机操作系统的沉浮往事（上）

移动终端操作系统&#xff0c;也就是指手机、平板电脑等设备所使用的操作系统。 在移动互联网高度发达的今天&#xff0c;我们使用移动终端操作系统的时长&#xff0c;可能已经远远超过了Windows等桌面操作系统。 那么&#xff0c;你真正了解这些移动终端操作系统吗&#xff1f…
阅读更多...
抖音seo源码开发部署技术解析

抖音seo源码开发部署技术解析

抖音seo源码开发是一项非常重要的技术&#xff0c;开发需要深入了解抖音平台的特点和用户需求&#xff0c;积累丰富的SEO经验&#xff0c;并不断学习和更新SEO技能&#xff0c;才能不断提高视频在搜索引擎中的曝光率和播放量。 抖音seo开发需要哪些技术 了解抖音的算法和规则&…
阅读更多...
浏览器被2345劫持了怎么搞

浏览器被2345劫持了怎么搞

起因我下载了某些修改东西&#xff0c;然后就被2345篡改了浏览器的数据。我是在虚拟机里下载的&#xff0c;但是虚拟机其实也是物理机的一部分&#xff0c;实际上下载的还是到了物理机里面&#xff0c;于是浏览器打开就变成了2345的导航页面 1 解决方案&#xff1a; 浏览器主页…
阅读更多...
DJ8-2 shell 的命令形式、shell 的变量、shell 的内部命令

DJ8-2 shell 的命令形式、shell 的变量、shell 的内部命令

目录 8.3 shell 可识别的命令形式 8.3.1 单条命令 8.3.2 多条命令 8.3.3 复合命令 8.3.4 后台命令 8.4 shell 变量和引用符 8.4.1 环境变量 plus. echo 命令的使用 8.4.2 系统变量 8.4.3 局部变量&#xff08;用户变量&#xff09; 8.4.4 单引号、双引号、…
阅读更多...
跨境电商领域的ChatGPT使用攻略

跨境电商领域的ChatGPT使用攻略

今天分享一个电商领域的ChatGPT应用指南! 一、写谷歌广告词 提示词: 现在你是一名谷歌广告的编写人员&#xff0c;你需要为xxx产品写10条谷歌广告标题和谷歌广告描述。要求是: 1.用英文输出你的答案 2.广告的标题和广告描述的字数等要符合谷歌的标准 3.广告要引人入胜&#xf…
阅读更多...
OceanBase—01（入门篇——使用docker安装OceanBase以及介绍连接OB的几种方式）

OceanBase—01（入门篇——使用docker安装OceanBase以及介绍连接OB的几种方式）

OceanBase—01&#xff08;入门篇——使用docker安装OceanBase以及介绍连接OB的几种方式&#xff09; 1. 前言1.1 安装部署参考1.1.1 安装前提1.1.2 参考 1.1 修改数据库用户名密码1.2 总结常见连接命令 2. 安装部署OceanBase2.1 启动 OceanBase 数据库实例2.1.1 默认拉取最新版…
阅读更多...
代码审计——XSS详解

代码审计——XSS详解

为方便您的阅读&#xff0c;可点击下方蓝色字体&#xff0c;进行跳转↓↓↓ 01 漏洞描述02 审计要点03 漏洞特征04 漏洞案例05 修复方案 01 漏洞描述 跨站脚本攻击&#xff08;Cross Site Script&#xff09;是一种将恶意JavaScript代码插入到其他Web用户页面里执行以达到攻击…
阅读更多...
没网络的CentOS7的Docker容器安装Java诊断神器Arthas

没网络的CentOS7的Docker容器安装Java诊断神器Arthas

操作过程 1. 先把jar包下载到本地的windwos2. 打包复制到服务器3. 启动容器设置4.重启容器并使用Arthas 1. 先把jar包下载到本地的windwos 下载地址 下载好后jar&#xff0c;然后CMD执行命令 java -jar arthas-boot.jar 然后随便进入某个jvm进程查看&#xff0c;会见到Conso…
阅读更多...
【技术新趋势】面向图像文档的版面智能分析与理解

【技术新趋势】面向图像文档的版面智能分析与理解

目录 一、什么是OCR&#xff1f;什么是版面分析理解&#xff1f;二、文档版面分析2.1、版面布局类型2.2、面向文档图像版面分析的实例分割2.3、逻辑结构分析 三、文档版面理解3.1、位置嵌入3.2、表格数据提取 四、智能文档处理技术新解决方案 人类撰写文档是为了记录和保存信息…
阅读更多...
Zoho Books助力跨境贸易！深入了解其多币种处理功能

Zoho Books助力跨境贸易！深入了解其多币种处理功能

对于跨境行业而言&#xff0c;合作不同的客户以当地货币收取付款是一个不简单的任务。现在&#xff0c;Zoho Books 推出了新的高级多币种处理功能&#xff0c;让多货币付款或收款不再困扰。&#xff08;注意&#xff1a;此功能在Zoho Books的专业版&#xff0c;高级版&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023