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>
以上就是如何在背景图上加文字的简单方法,大家可以根据需要进行调整。
粉丝
0
关注
0
收藏
0