css图片底部透明文字 |css增加元素权重

/* 添加背景图片 */
background-image: url('image.jpg');
/* 设置背景图片覆盖整个元素 */
background-size: cover;
background-repeat: no-repeat;
/* 透明度 */
opacity: 0.9;
/* 添加一个可伸缩框，将文字放在框内 */
display: flex;
flex-direction: column;
justify-content: flex-end;
/* 设置框的背景颜色，并设置透明度 */
background-color: rgba(0, 0, 0, 0.5);
/* 确保该框充满整个图片底部 */
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;

代码中介绍了如何使用CSS创建图片底部透明文字的效果。首先，需要使用background-image属性添加背景图片，并将背景覆盖整个元素。接下来，使用opacity属性设置透明度。然后，创建一个可伸缩框，并将文字放在框内。使用background-color属性为框添加背景颜色，并设置透明度。最后，使用position属性将框定位在图片底部，并将padding属性设置为20px，以确保该框充满整个图片底部。

总之，使用上述CSS代码可以轻松地为网站的图片添加透明文字效果，从而使网页更具视觉吸引力。