如何让文字在图片上面?当使用 CSS 设计一个网页时,我们有时需要在图片上面添加文字,这样会使网页看起来更加美观和清晰。那么,如何让文字在图片上面呢?我们可以使用 CSS 的 position 属性来
html<br>
<div class="container"><br>
<img src="image.jpg" alt="image"><br>
<p>在图片上的文字</p><br>
<pre><br> <br>
/* 在 CSS 中设置图片和文字的样式 */<br>
.container {<br>
position: relative;<br>
display: inline-block;<br>
}<br>
<br>
.container p {<br>
position: absolute;<br>
top: 0;<br>
left: 0;<br>
margin: 0;<br>
padding: 10px;<br>
font-size: 18px;<br>
color: #fff;<br>
background: rgba(0,0,0,0.5);<br>
}<br>
css .container { position: relative; display: inline-block; } .container p { position: absolute; top: 0; left: 0; margin: 0; padding: 10px; font-size: 18px; color: #fff; background: rgba(0,0,0,0.5); }
粉丝
0
关注
0
收藏
0