CSS网页制作技巧:背景图片定位

本文详细介绍了网页中图片的两种添加方式:通过<img>标签直接插入和通过CSS背景属性添加,并解释了如何判断图片的添加方式。此外,文章深入探讨了背景图片的定位决定因素及CSS背景图片定位的原理,包括水平位置和垂直位置的设置方法。

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

一、 网页中添加图片的方式有两种

一种是:通过<img>标签直接插入到html中
另一种是:通过css背景属性添加

二、 怎样来判断添加图片方式??

Ø 网页中的装饰性的图片,通过背景图片添加

Ø 用户图片,通过插入形式添加

Ø 按钮,有多个状态的效果图片,通过背景图片添加

三、 背景图片定位决定因素:

a. 设置背景图片容器的大小(宽度和高度)

b. 首先要定义背景图片(background-image)

c. 其次是背景图片是否重复(background-repeat)

四、 背景图片定位(background-position)原理

A. 语法:Background-position:水平位置 垂直位置

B. 水平位置/垂直位置设置方法:

1) 数值(px)正负值都可以

2) 百分比(%)范围:0%—100%

3) 关键词:水平位置:left(左) center(中) right(右)

垂直位置:top(上) center(中) bottom(下)

注意:当只设置一个值时:代表水平位置,垂直位置默认居中

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值