背景background相关内容

背景颜色
➢属性名: background-color
bgc
➢属性值:
●颜色取值:关键字、rgb表示法、rgba表示法、 十六进制...
➢注意点:
背景颜色默认值是透明: rgba(0,0,0,0) 、transparent
背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,- 般在布局中会习惯先给盒子设置背景颜色

背景图片
➢属性名:| background-image (bgi)
➢属性值:|
background- image: url( '图片的路径' ); |
➢注意点:

背景图片中urI中可以省略引号
背景图片默认是在水平和垂直方向平铺的

背景图片仅仅是指给盒子起到装饰效果,类似于背景颜色,是不能撑开盒子的

背景平铺
➢属性名: background-repeat (bgr)
➢_ 属性值:
取值
效果
repeat
(默认值)水平和垂直方向都平铺
no-repeat
不平铺
repeat-x
沿着水平方向(x轴)平铺
repeat-y
沿着垂直方向(y轴)平铺

3.1背景平铺
➢属性名: background-repeat (bgr)
➢_ 属性值:
取值
效果
repeat
(默认值)水平和垂直方向都平铺
no-repeat
不平铺
repeat-x
沿着水平方向(x轴)平铺
repeat-y
沿着垂直方向(y轴)平铺

小结
➢背景位置属性的属性名是?
background-position
➢背景位置属性的取值有哪些?
left
水平方向
center
1.方位名词(最多只能表示9个位置)
right
top
+
属性值
垂直方向
center
bottom
原点(0.0) 日盒子的左上角
2. 数字+px (坐标
坐标系生x轴。水平向右
y轴。重直向下
操作日将图片左上角与坐标点重合即可

背景相关属性的连写形式
➢属性名| background
(bg)
➢属性值:
单个属性值的合写,取值之间以空格隔开
➢书写顺序:
推荐: background: color image repeat position
➢省略问题:
可以按照需求省略
特殊情况:在pc端,如果盒子大小和背景图片大小- -样,此时可以直接写background: url()
>注意点
如果需要设置单独的样式和连写
①要么把单独的样式写在连写的下面
②要么把单独的样式写在连写的里面

背景位置
➢属性名
background-position (bgp)
➢属性值: background- position:水平方向位置垂直方向位置;

图片见微信收藏

注意点:
方位名词取值和坐标取值可以混使用,第一个取值表示水平,第二个取值表示垂直

(拓展) img标签和背景图片的区别
➢需求:需要在网页中展示一-张图片的效果?
➢方法一:直接写上img标签即可
●img标签是一 个标签, 不设置宽高默认会以原尺寸显示
➢方法二: div标签+背景图片

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

需求:需要在网页中展示一-张图片的效果?
➢方法一:直接写上img标签即可
●img标签是一 个标签, 不设置宽高默认会以原尺寸显示
➢方法二: div标签+背景图片

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

### CSS `background` 属性详解 #### 背景概述 CSS 的 `background` 是一个复合属性,能够一次性定义多个与背景相关的子属性。这不仅减少了冗余代码量,还提高了样式的可读性和维护性[^1]。 #### 子属性及其功能 以下是 `background` 可配置的主要子属性: - **`background-color`**: 设置元素的背景颜色。 - **`background-image`**: 定义作为背景显示的图像。 - **`background-position`**: 控制背景图片的位置。 - **`background-size`**: 设定背景图的比例大小。 - **`background-repeat`**: 配置背景图是否重复以及如何重复。 - **`background-attachment`**: 指定背景图随滚动条的行为(固定或滚动)。 - **`background-origin` 和 `background-clip`**: 进一步控制背景绘制区域和裁剪范围。 这些子属性可以通过单一声明来组合使用[^3]。 #### 示例代码展示 下面是一些常见的 `background` 使用场景及其实现方式: ##### 基础用法——纯色背景 如果只需要简单的单色背景,则可以直接指定颜色值: ```css body { background: #f0f8ff; /* AliceBlue */ } ``` ##### 图片背景并调整位置 当希望引入一张图片作为页面背景时,可以这样操作: ```css div.example { background: url('example.jpg') no-repeat center/cover; } ``` 上述例子设置了不平铺 (`no-repeat`) 的中心居中的全屏覆盖效果(`center/cover`) 的背景图片[^4]。 ##### 复杂多层渐变加图案混合 更高级的应用可能涉及线性渐变叠加实际纹理文件的情况: ```css section.hero-banner { background: linear-gradient(to bottom, rgba(255, 255, 255, .7), rgba(0, 0, 0, .7)), url('hero-pattern.png'); background-size: cover; background-position: top center; height: 100vh; } ``` 这里创建了一个透明度变化的白色到黑色过渡之上再放置了一张英雄主题模式的画面。 #### 移除已应用的 Background 属性 假如需要动态清除某 HTML 元素上的现有背景设定,可通过 JavaScript 或者直接修改其对应的 style 表达式完成。例如利用 JS 清理所有自定义背景特性如下所示: ```javascript document.getElementById("myElement").style.background = ''; // 或者单独重设某些部分为空字符串即可恢复默认状态 document.querySelector('.anotherClass').style.backgroundColor = 'transparent'; ``` 此脚本片段展示了如何通过编程手段删除特定对象内的任何先前定义过的背景样式[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值