如何使用HTML和CSS在图像上添加文字?(代码示例)

本文介绍了CSS3中的background-position属性,它允许从不同点设置背景图像的位置。以前只能从左上角开始定位,而现在可以指定如右下角等任意起点。通过示例展示了如何设置背景图像的起点,例如`background-position: right 20px bottom 40px;`。此外,还提及了CSS3中固定背景大小和设置多个背景图像的功能。
摘要由CSDN通过智能技术生成

本篇文章给大家分享的是css3中background-position的用法,有需要的朋友可以参考一下。

 

在css3之前设置background-position,你可以从元素的左上角设置位置。

例如:

1

div{background-position:20px 40px;/*20px from left & 20px from top*/}

问题是无法从另一个点确定确切的位置,例如从底部/右边,我们只能从左上角开始。

我们可以写:background-position:right bottom;也可以写:background position:70%/从left开始/ 80%/从top开始/;,

但是我们不能从右边写20px而从底部写20px。

我们来看看新的background-position属性

为了解决这个问题,CSS3为我们提供了确定从何处开始定位以及确定0,0点的选项。

我们怎么实现呢?

我们现在可以用css3写下水平和垂直位置的开头,如右下角+起点的值,而不是只写2个值(左上角的水平和垂直点)。

让我们创建一个例子:

首先创建一个带有一些样式的空div:

HTML:

1

2

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值