在网页设计中,有时候需要把一些文字放在图片上面,这样可以让页面更加丰富有趣。这样的效果可以使用CSS来实现。下面就来介绍如何实现在图片上面放置文字。/*先定义图片样式*/ img { position
在网页设计中,有时候需要把一些文字放在图片上面,这样可以让页面更加丰富有趣。这样的效果可以使用CSS来实现。下面就来介绍如何实现在图片上面放置文字。
/*先定义图片样式*/ img { position: relative; } /*添加文字样式*/ img::before { position: absolute; content: "文字内容"; font-size: 24px; color: #fff; bottom: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.5); padding: 10px; box-sizing: border-box; }
上面的代码中,先定义了图片的样式,使用了position:relative属性,这样就可以使用绝对定位来放置文字。接着在img元素的::before伪元素中添加文字的样式。::before伪元素可以在元素之前插入内容,这里使用content属性定义了要插入的文本内容。
接下来,使用了绝对定位,通过bottom和left属性定义了文字的位置,使用了width属性和padding属性设置了文字的宽度和内边距。最后通过background-color属性设置了文字的背景色,并使用了rgba()函数来实现半透明效果。
这样在图片上添加文字就完成了。需要注意的是,如果图片大小发生改变,需要重新调整文字样式。
粉丝
0
关注
0
收藏
0