css怎么图片下面放东西

CSS中如何在图片下方放置文字或其他元素？ 在网页设计过程中，通常需要将图片与相应的文字或其他元素进行组合，以达到更好的页面效果。本文将介绍如何在CSS中实现在图片下方放置文字或其他元素。 方法一：使用文本包裹方式 首先，在HTML中将图片和文本元素包裹在同一个父级容器中，可以使用div或其他合适的元素。

    
        <div class="container">
            <img src="image.jpg" alt="图片">
            <p>这里是文字描述</p>
        </div>
    

接下来，在CSS中设置容器的position值为relative或absolute，这样才能在容器内进行绝对定位。

    
        .container {
            position: relative;
        }
    

然后，设置文本元素的position值为absolute，并通过top、left、bottom、right等属性进行定位。

    
        .container p {
            position: absolute;
            bottom: 10px;
            left: 0;
            right: 0;
            text-align: center;
        }
    

通过以上步骤，就可以实现在图片下方放置文字的效果了。 方法二：使用背景图方式 另一种方式是将文本元素作为容器的背景图，并在CSS中通过background-position属性进行定位。

    
        .container {
            background: url("image.jpg") no-repeat;
            background-position: center top;
            padding-top: 50%;
        }
        .container p {
            background-color: rgba(0,0.7);
            color: #fff;
            font-size: 20px;
            padding: 10px;
        }
    

在这种方式中，为了保证容器的高度与图片大小相匹配，需要使用padding-top属性进行设置，其值为图片高度的50%。然后，通过background-position属性对背景图进行定位，并为文本元素设置背景色和其他样式。 综上所述，以上两种方式都可以实现在图片下方放置文字或其他元素的效果，具体按需选择。