css中如何在背景图上加文字

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS技巧之——如何在背景图上加文字background-image: url( 图片地址 ); background-repeat: no-repeat; background-position:

CSS技巧之——如何在背景图上加文字

background-image: url("图片地址");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
text-align: center;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,.7); 

首先,我们需要将背景图设置为元素的背景,即使用background-image属性来设置,如上述代码所示。
接着,为了使背景图不重复,使用background-repeat属性设置为no-repeat。
background-position设置为center center,这样可以使背景图居中显示。
background-size设置为cover,可以让背景图自适应,填充整个元素。
text-align设置为center,这样文字就可以居中显示在背景图上了。
为了让文字更清晰,可以设置color属性为白色,text-shadow属性可以为文字添加阴影,让文字更加醒目。
最后,我们可以在元素内直接添加文字,代码如下:

 <div> 这是背景图上的文字 </div> 

以上就是如何在背景图上加文字的简单方法,大家可以根据需要进行调整。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中如何在背景图上加文字

粉丝

0

关注

0

收藏

0

已有0次打赏