css在图片上固定文字

CSS 在图片上固定文字是一种非常常见的网页制作技巧。它可以让文字不随图片滚动而保持固定位置，在大幅度滚动页面时非常有用。这里将介绍一些实现这一效果的 CSS 属性。

// HTML 代码div class="image">
    img src="example.jpg" alt="Example">
    div class="text">
    p>
    这是一段在图片上固定的文字。/p>
    /div>
    /div>
// CSS 代码.image {
    position: relative;
    display: inline-block;
}
.text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 10px;
}
    

上述代码中，div class="image"> 包含了一个 img> 标签和一个用于放置文本的 div> 标签。div class="text"> 的 CSS 代码中，使用了 position: absolute; 将它的位置固定在图片上。bottom: 0; left: 0; right: 0; 使其紧贴着图片底部和左右两侧。background-color: rgba(255, 255, 255, 0.5); 设置了半透明的背景色，并且 padding: 10px; 添加了一些内边距，使文字距离边缘更加美观。

当然，div class="text"> 中可以添加更多的样式，例如修改文字颜色、字体大小、阴影等等，完全由制作者自己决定。

除了使用 position: absolute; 这种方式，还可以使用一些其他的 CSS 属性来实现在图片上固定文字。例如，可以将 img> 标签和 p> 标签都置于同一个 div> 内，并设置这个 div> 的 position: relative; 属性，然后再将文字位置通过 margin 或者绝对定位等方式进行调整。在实际制作过程中，应根据需要灵活选择使用哪些方式，以达到最优效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！