摘要:

下文讲述使用css代码在背景图片的中间添加文字的方法分享,如下所示;

实现思路:

1.定义一个div,并放入背景图片,设置其内部元素水平垂直居中

2.定义一个子div,并放入文字信息

通过以上两个步骤,即可实现背景图片中间放入相应的文字

例:

maomao365.com

背景图片中间加入文字的示例

.main {

width:500px;

height:100px;

line-height:100px;

text-align: center;

background: url(http://www.maomao365.com/wp-content/uploads/2020/01/css_bg.png) no-repeat;

background-size: 100% 100%;

}

.main-text {

color: white;

font-size: 18px;

font-weight: bold;

}

居中文字(maomao)

e6fad2c02a67e7347c4ae7559a21c32c.png

css背景图片中文字居中的示例分享

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐