12.前端--CSS-背景属性

1.背景颜色

样式名称:

     background-color 定义元素的背景颜色

使用方式:

     background-color:颜色值;

其他说明:

     元素背景颜色默认值是 transparent(透明)
     background-color:transparent;

代码演示:

在这里插入图片描述
在这里插入图片描述
背景色半透明
     background: rgba(0, 0, 0, 0.3);

  • 最后一个参数是 alpha 透明度,取值范围在 0~1之间
  • 我们习惯把 0.3 的 0 省略掉,写为 background: rgba(0, 0, 0, .3);

2.背景图片

样式名称:

     background-image 定义元素的背景图片

使用方式:

     background-image : none | url (url)
在这里插入图片描述

其他说明:

实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)

注意:背景图片后面的地址,千万不要忘记加 URL, 同时里面的路径不要加引号

代码演示:

在这里插入图片描述
在这里插入图片描述

3.背景平铺

样式名称:

     background-repeat 设置元素背景图像的平铺

使用方式:

     background-repeat: repeat | no-repeat | repeat-x | repeat-y
在这里插入图片描述

代码演示:

在这里插入图片描述

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

4.背景图片位置

样式名称:

     background-position 属性可以改变图片在背景中的位置

使用方式:

     background-position: x y;
在这里插入图片描述

参数代表的意思是:x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位

其他说明:

1、参数是方位名词

如果指定的两个值都是方位名词,则两个值前后顺序无关,比如 left top 和 top left 效果一致
如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐

2、参数是精确单位

如果参数值是精确坐标,那么第一个肯定是 x 坐标,第二个一定是 y 坐标
如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中

3、参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用,则第一个值是 x 坐标,第二个值是 y 坐标

5.背景图片固定

样式名称:

    background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

使用方式:

    background-attachment : scroll | fixed
在这里插入图片描述

6.背景样式合写

背景合写样式:

    background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

使用方式:

    background: transparent url(image.jpg) repeat-y fixed top ;

7.背景总结

在这里插入图片描述

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

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

相关文章

MySQL定期整理磁盘碎片

MySQL定期整理磁盘碎片:提升数据库性能的终极指南 MySQL作为一个强大的关系型数据库管理系统,在长时间运行后可能会产生磁盘碎片,影响数据库性能。本博客将深入讨论如何定期整理MySQL磁盘碎片,以确保数据库的高效运行。我们将介绍…

Redis--HyperLogLog的指令语法与使用场景举例(UV统计)

文章目录 前言HyperLogLog介绍HyperLogLog指令使用使用场景:UV统计 前言 Redis除了常见的五种数据类型之外,其实还有一些少见的数据结构,如Geo,HyperLogLog等。虽然它们少见,但是作用却不容小觑。本文将介绍HyperLogL…

微信小程序首页、界面布局、功能简洁(示例三)

微信小程序首页界面布局、页面简洁,功能简单 直接上具体代码: 1、js代码 Page({/*** 页面的初始数据*/data: {imgList: [../../images/demo.jpg, ../../images/demo.jpg, ../../images/demo.jpg],navList: [{src: ../../images/nav1.png,title: 菜单一}…

鸿蒙开发系列教程(八)--ArkTS语言:IF-ELSE渲染

条件渲染 if/else Entry Component struct ViewA1 {State count: number 0;build() {Column() {Text(计数${this.count})if (this.count 5) {Text(数字等于5).fontColor(Color.Green)} else {Text(数字不等于5).fontColor(Color.Red)}Button(增加).onClick(() > {this.cou…

理想汽车大模型算法工程师面试,被问的瑟瑟发抖。。。。

最近我们技术群的一位小伙伴,分享了他面试理想汽车大模型算法工程师的经历与经验。 今天整理后分享给大家,如果你对这块感兴趣,可以文末加入我们的技术&面试讨论群 一面(1.5h,感觉有点难) 自我介绍&…

CPU中的算术逻辑单元(ALU)

ALU有2个单元,1个算术单元和1个逻辑单元 算数单元 1 bit加法 半加器 由一个异或门(XOR)和与门(AND)两个逻辑门构成,异或门表示无进位加法(sum),而与门表示进位&…

解决 Git:ssh: connect to host github.com port 22: Connection timed out 问题的三种方案

1、问题描述: 其一、整体提示为: ssh: connect to host github.com port 22: Connection timed out fatal: Could not read from remote repository. 中文为: ssh:连接到主机 github.com 端口 22:连接超时 fatal&a…

在IntelliJ IDEA中通过Spring Boot集成达梦数据库:从入门到精通

目录 博客前言 一.创建springboot项目 新建项目 选择创建类型​编辑 测试 二.集成达梦数据库 添加达梦数据库部分依赖 添加数据库驱动包 配置数据库连接信息 编写测试代码 验证连接是否成功 博客前言 随着数字化时代的到来,数据库在应用程序中的地位越来…

在Go中处理HTTP请求和响应

在Go语言中,处理HTTP请求和响应的关键在于对net/http包的理解和使用。这个包提供了强大的工具,使开发者能够轻松地构建Web应用程序。以下是一个简单的示例,展示了如何在Go中处理HTTP请求和响应。 首先,确保你已经安装了Go语言的开…

spring Cloud Stream 实战应用深度讲解

springCloudStream 简介 Spring Cloud Stream是一个框架,用于构建与共享消息传递系统连接的高度可扩展的事件驱动微服务。 该框架提供了一个灵活的编程模型,该模型建立在已经建立和熟悉的 Spring 习惯用语和最佳实践之上,包括对持久发布/订…

springboot家乡特色推荐系统源码和论文

在Internet高速发展的今天,我们生活的各个领域都涉及到计算机的应用,其中包括家乡特色推荐的网络应用,在外国家乡特色推荐系统已经是很普遍的方式,不过国内的管理网站可能还处于起步阶段。家乡特色推荐系统采用java技术&#xff0…

python数据和分析——pandas基础内容

Pandas 的两个主要的数据结构是 Series 和 DataFrame: Series 是一维标记数组,类似于带有标签的列表。它可以包含不同类型的数据,并且可以通过索引进行访问和操作。DataFrame 是二维表格型数据结构,类似于 SQL 表或 Excel 电子表…