CSS背景相关属性

news/2024/11/25 15:48:50/

一、背景颜色

属性名:background-color (bgc)

属性值:颜色取值:关键字,rgb表示法,rgba表示法,十六进制表示。

注:

  • 背景颜色默认透明:rgba(0,0,0,0);transparent
  • 背景颜色不会影响盒子大小,并且还能看清盒子大小和位置,一般在布局中会习惯先给盒子设置背景颜色。

二、背景图片

属性名:background-image (bgi)

属性值:background-image:url("图片路径");

注:

  • 背景图片中url可以省略引号。
  • 背景图片默认在水平和垂直方向平铺。
  • 背景图片仅仅是指给盒子起到装饰效果,类似于背景颜色,是不能撑开盒子的。 

三、背景平铺

属性名:background-repeat (bgr)

属性值: 

取值效果
repeat(默认值)水平和垂直方向

no-repeat

不平铺
repeat-x沿水平方向(x轴)平铺
repeat-y沿垂直方向(y轴)平铺

四、背景图位置

属性名:background-position (bgp)

属性值: background-position:水平方向位置 垂直方向位置

注:

  • 方位名词取值和坐标取值可以混用。
  • 第一个取值表示水平,第二个取值表示垂直。 

 五、背景相关属性连写

属性名:background(bg) 

属性值:单个属性值的合写,取值之间以空格隔开

书写顺序:推荐顺序:background:color image repeat position

背景图位置如果是英文单词可以交换水平垂直位置顺序,如果是数值,不可以颠倒顺序。

省略问题:可以按需求省略。

六、img标签(插入图)和背景图片的区别

需求:在网页中展示一张图片的效果?

①直接写上img标签即可

②div标签+背景图片

(需要设置div的宽高,因为背景图片只是装饰的CSS样式,不能撑开div标签)

img用来实现网页中比较重要的图片。


http://www.ppmy.cn/news/49819.html

相关文章

从广交会,看懂海尔智家逆势增长的秘密

中国企业的全球化战略应从何处、以何种方式推进?作为行业全球化最彻底的企业,海尔智家是个很好的参考。 4月15日,在第133届中国进出口贸易交易会(以下简称“广交会”)上,海尔智家展示了其扎根本土&#xf…

java 拼接字符串的方法

1.拼接字符串的方法,先要将字符串转化为数字类型,再根据需要拼接。这样可以避免直接拼接导致的错误。 2.将字符串转化为数字类型,这个就是一个循环。可以使用循环的方法,但是循环次数不宜太多,否则容易出错。 3.可以使…

总结828

学习目标: 4月(复习完高数18讲内容,背诵21篇短文,熟词僻义300词基础词) 学习内容: 暴力英语:回环诵读之前的文章,背150个单词,背《冰与火之歌》-守夜人誓词 高等数学&…

Flink高手之路6-Flink四大基石

文章目录 Flink四大基石一、Flink的四大基石1. Checkpoint2. State3. Time4. Window 二、案例1.需求2.代码实现3.运行,查看结果4.增加需求2的实现5.重启程序,查看结果 Flink四大基石 一、Flink的四大基石 Flink之所以能这么流行,离不开它最…

奇异值分解SVD

概念 奇异值分解(singular value decomposition)是线性代数中一种重要的矩阵分解。奇异值分解在某些方面与对称矩阵或厄密矩阵基于特征向量的对角化类似。然而这两种矩阵分解尽管有其相关性,但还是有明显的不同。对称矩阵特征向量分解的基础…

CorelDRAW2023最新版本图像设计软件

CorelDRAW 2023作为最新版的图像设计软件,在功能上做了较大提升,主要新的功能特性如下: 1. 全新界面设计:采用简约现代的 UI 设计,菜单和工具重新组织,更加直观易用。提供自动提示与设计指导,易于上手。 2. 智能工具与提示:运用 AI技术对用户操作行为和设计习惯进行分析,给出…

【Seata】Seata配置上传Nacos

前言 在seata1.4.2版本之后,Seata可以通过dataId配置seata的所有配置项,也就是说,我们可以将之前上传的所有配置项整合到一个配置文件中,接下来直接演示该怎样操作。 如果你不清楚seata的config.txt文件在哪里下载或者其它的一些…

基于html+css的图片展示20

准备项目 项目开发工具 Visual Studio Code 1.44.2 版本: 1.44.2 提交: ff915844119ce9485abfe8aa9076ec76b5300ddd 日期: 2020-04-16T16:36:23.138Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.19044 项目…