背景图片样式理解

本文详细讲解了网页设计中背景颜色的指定方法,包括#hex和rgb表示,背景图片的使用、平铺模式、定位方式,以及如何通过background属性统一管理这些样式。了解并实践这些技巧,提升你的网页布局和视觉效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.背景颜色即可为指定元素的背景着色

它的格式为

background-color: #ccc;

颜色有多种表示方法

1)直接英文指定颜色

2)通过 #+十六位进制来表示

例如:#000是黑色#000000  当每两位是同一个时可只写一次 但必须是只能三位或者六位

不存在4.5位

3)也可通过rgb()格式来调色

rgb()中需要写数字,数字在0·255之间,值越小颜色越深

例如:rgb(0,0,0)表示黑色 

2.背景图片

样式:

background-image url("images/2.jpg")

注意:图片的路径需要写在 url()

背景图片如果不有容器大的话,那么它会把背景图平铺后再显示,可以指定是否平铺
1. no-repeat: 不平铺
2. repeat-x: x轴方向平铺
3. repeat-y: y轴方向平铺
4. repeat: x轴和y轴方向都平铺(默认方式)
要想设置面的值,我们需要另外的属性叫background-repeat。

3.背景图片的位置用

background-position来指定
1. left top: 左上角(默认值)
2. right top: 右上角
3. left bottom: 左下角
4. right bottom: 右下角
5. left center: 左中间位置
6. right center: 右中间位置
7. center center: 居中位置

4.并且我们可以通过

background来直接指定所有样式 格式为:
background: color position size repeat origin clip attachment image;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值