css在图片上放文字

CSS在图片上放文字是非常常见的一种效果，它可以让图片与文字更好地结合起来，使得网站页面更加美观和富有视觉冲击力。

实现这种效果的方法很简单，只需要在HTML中将图片和文本放在同一个元素中，然后使用CSS设置元素的定位和样式。例如，下面的代码实现了在图片上放置文字的效果：

div class="image-with-text">
    img src="image.jpg" alt="美丽的风景">
    p>
    这是一张美丽的风景图片/p>
    /div>
    style>
.image-with-text {
    	position: relative;
}
.image-with-text img {
    	display: block;
    	max-width: 100%;
    	height: auto;
}
.image-with-text p {
    	position: absolute;
    	bottom: 0;
    	left: 0;
    	background-color: #000;
    	color: #fff;
    	padding: 10px;
    	margin: 0;
    	font-size: 16px;
    	line-height: 1.5;
    	opacity: 0.8;
    	width: 100%;
    	box-sizing: border-box;
}
    /style>
    

上面代码中，将图片和文本都放在一个名为"image-with-text"的div元素内。通过设置这个div的position为relative，使得内部的元素可以使用相对于它的绝对位置定位。然后，将图片的宽度设置为100%以自适应父元素大小，并将内部的p元素使用绝对定位并设置bottom: 0和left: 0将其置于图片底部，并使用背景色、文字颜色和其他样式美化文本。

通过这种方式，我们就可以很容易地在图片上放置文本，实现更好的视觉效果和美感。

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