css在图片上插文本框

图片与文本框的结合是一种常见的设计需要。可以使用CSS来在图片上插入文本框。下面我们将讨论如何使用CSS来实现这一点。

/* 设置图片的位置和大小 */img{
    position: relative;
    width: 100%;
}
/* 设置文本框的样式 */.text-box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: white;
    border: 2px solid black;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
    max-width: 80%;
}
/* 为文本框添加内容 */.text-box p{
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 15px;
}
.text-box h2{
    font-size: 24px;
    margin-bottom: 20px;
}
.text-box ul{
    margin-bottom: 20px;
}
.text-box ul li{
    font-size: 16px;
    line-height: 1.5;
}
.text-box img{
    max-width: 100%;
    margin-bottom: 15px;
}
    /* 在HTML中插入图片和文本框 */div class="container">
    img src="your_image.jpg" alt="">
    div class="text-box">
    h2>
    Your Title/h2>
    p>
    Your paragraph here./p>
    ul>
    li>
    Point 1/li>
    li>
    Point 2/li>
    li>
    Point 3/li>
    /ul>
    img src="your_image2.jpg" alt="">
    /div>
    /div>
    

这样就可以在图片上插入一个文本框了。可以根据需要调整CSS中的各个属性，以增强视觉效果。希望这篇文章对你有所帮助。

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