css显示在图片上面

CSS 是网页样式设计中不可或缺的一部分。想象一下，若不使用 CSS，网页将显得非常让人讨厌，充满了大段而且无法辨识的文本。这样的一个网页，不仅对于用户来说体验差，而且也不利于网站应用的推广。其中，一些的设计元素可以通过 CSS 来实现，比如图片放置在文本之上。

想让图片位于文本之上，不妨试试下面这一段简单的 CSS 代码使用：

img {
    position: relative;
    z-index: 1;
}
p {
    position: relative;
    z-index: 2;
    background-color: rgba(255,255,255,0.7);
    padding: 10px;
}
    

上述代码块中的第一段代码中，使用了position: relative; 让图片变成一个相对定位元素，并且将其层叠顺序设置为1（z-index: 1; ）。

第二段代码设置了与图片相邻的 p 元素。它的 position 属性也被设为 relative，层叠顺序比图片更高，设置为 2。这样的话，当 p 元素和图片重叠时，p 元素会被显示在图片之上。

此外，为了优化用户的体验和界面的美观，我们还为 p 元素添加了一个透明的白色背景（使用background-color: rgba(255,255,255,0.7); ）以及一些内边距（padding: 10px; ），从而比较舒适、美观的显示在网页上。

最后，附上一个完整的 HTML 示例：

!DOCTYPE html>
    html>
    head>
    title>
    图片显示在文本之上 /title>
    style>
img {
    position: relative;
    z-index: 1;
}
p {
    position: relative;
    z-index: 2;
    background-color: rgba(255,255,255,0.7);
    padding: 10px;
}
    /style>
    /head>
    body>
    p>
    这是一段内容。其中，img src="example.jpg">
     是一张图片，显示在文本之上。/p>
    /body>
    /html>
    

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