背景

background-color 设置背景颜色

background-color: red;

background-image 设置背景图片

- 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色
- 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满
- 如果背景的图片大于元素，将会一个部分背景无法完全显示
- 如果背景图片和元素一样大，则会直接正常显示
background-image: url("./img/1.png");

background-repeat 用来设置背景的重复方式
可选值：
repeat 默认值，背景会沿着x轴 y轴双方向重复
repeat-x 沿着x轴方向重复
repeat-y 沿着y轴方向重复
no-repeat 背景图片不重复
background-position 用来设置背景图片的位置
设置方式：
通过 top left right bottom center 几个表示方位的词来设置背景图片的位置
使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center

通过偏移量来指定背景图片的位置：
水平方向的偏移量垂直方向变量
或者: background-position: -50px 300px;
设置背景的范围 background-clip
- 可选值：
  border-box 默认值，背景会出现在边框的下边
  padding-box 背景不会出现在边框，只出现在内容区和内边距
  content-box 背景只会出现在内容区
  如：background-clip: content-box;
background-origin 背景图片的偏移量计算的原点
padding-box 默认值，background-position从内边距处开始计算
content-box 背景图片的偏移量从内容区处计算
border-box 背景图片的变量从边框处开始计算
如：background-origin: border-box;

background-size 设置背景图片的大小
第一个值表示宽度
第二个值表示高度
- 如果只写一个，则第二个值默认是 auto
cover 图片的比例不变，将元素铺满
contain 图片比例不变，将图片在元素中完整显示
总结
background-color
background-image
background-repeat
background-position
background-size
background-origin
background-clip
background-attachment
backgound 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置
并且该样式没有顺序要求，也没有哪个属性是必须写的
注意：
background-size必须写在background-position的后边，并且使用/隔开
background-position/background-size

background-origin background-clip 两个样式，orgin要在clip的前边
background-attachment
- 背景图片是否跟随元素移动
- 可选值：
  scroll 默认值背景图片会跟随元素移动
  fixed 背景会固定在页面中，不会随元素移动

渐变

通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果渐变是图片，需要通过background-image来设置

linear-gradient()

线性渐变，颜色沿着一条直线发生变化linear-gradient(red,green) 红色在开头，绿色在结尾，中间是过渡区域
- 线性渐变的开头，可以指定一个渐变的方向to leftto rightto bottomto topdeg deg表示度数turn 表示圈- 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况
如：background-image: linear-gradient(red 50px,yellow 100px, green 120px, orange 200px);
- repeating-linear-gradient() 可以平铺的线性渐变

radial-gradient() 径向渐变(放射性的效果)

默认情况下径向渐变的形状根据元素的形状来计算的
正方形 --> 圆形
长方形 --> 椭圆形
- 我们也可以手动指定径向渐变的大小
circle 圆形
ellipse 椭圆形- 也可以指定渐变的位置
- 语法：radial-gradient(大小 at 位置, 颜色 位置 ,颜色 位置 ,颜色 位置)大小：circle 圆形ellipse 椭圆closest-side 近边  closest-corner 近角farthest-side 远边farthest-corner 远角位置：top right left center bottom
如：background-image: radial-gradient(farthest-corner at 100px 100px, red , yellow)

HTML设置背景颜色及背景图片相关推荐

android textview 背景图片,Android—TextView 背景颜色与背景图片设置
Android TextView 背景颜色与背景图片设置,android textview 控件,android textview 背景, android textview 图片,android te ...
android textview获取背景颜色,Android TextView背景颜色与背景图片设置
Android TextView 背景颜色与背景图片设置,android textview 控件,android textview 背景, android textview 图片,android te ...
C# 如何给Word文档设置背景颜色和背景图片
C# 如何给Word文档设置背景颜色和背景图片 Word文档在创建时,背景颜色都是白色的,这样的背景色比较单一,看久了以后也非常容易视觉疲劳,给文档设置一个合适的背景颜色或者添加好看的背景图片,不仅可 ...
Java 给PDF文档设置背景颜色和背景图片
如题,这篇文章主要介绍如何在Java应用程序中给PDF文档设置背景颜色和背景图片. 使用组件: Spire.PDF for Java 下载Spire.PDF for JAVA包并解压缩,然后从lib文 ...
CSS学习记录3.2/设置标签的背景颜色/控制背景图片的平铺方式/控制背景图片的位置/背景图片关联方式/背景图片和插入图片的区别/捕鱼达人背景练习/精灵图
设置标签的背景颜色: CSS中的background-color:属性,就是专门用来设置标签.bc+table 设置背景图片: CSS中的background-image: url( );的属性就是设 ...
CSS的背景属性设置(背景颜色、背景图片、背景平铺、背景附着、背景复合写法)
文章目录 1 背景颜色 2 背景图片 3 背景平铺 4 背景图片位置 5 背景图像固定(背景附着) 6 背景复合写法 7 背景色半透明 8 背景总结案例:五彩导航通过CSS背景属性,可以给页面元素 ...
【ChatGPT】Spire.Doc 给 Word 文档设置背景颜色和背景图片
使用 Spire.Doc 给 Word 文档设置背景颜色和背景图片 1.首先需要引用 Spire.Doc 的命名空间: using Spire.Doc; using Spire.Doc.Documen ...
Java 给PowerPoint文档设置背景颜色和背景图片
我们在制作PowerPoint文档的时候,为了让文档看上去更加美观,通常会给文档设置背景颜色或背景图片.这篇文章将介绍如何使用免费Java PowerPoint组件 – Free Spire.Pres ...
css的背景颜色有哪些,css背景颜色、背景图片，以及列表的多种样式
背景样式 • background-color 设置元素的背景颜色. • background-image 把图像设置为背景. • background-position 设置背景图像的起始位置. • ...
html表格背景图片格式,css背景颜色、背景图片，以及列表的多种样式
背景样式 • background-color 设置元素的背景颜色. • background-image 把图像设置为背景. • background-position 设置背景图像的起始位置. • ...

HTML设置背景颜色及背景图片

背景

background-color 设置背景颜色

background-image 设置背景图片

渐变

linear-gradient()

radial-gradient() 径向渐变(放射性的效果)

HTML设置背景颜色及背景图片相关推荐

最新文章

热门文章