如何在HTML中将一个图像置于另一个图像的顶部

-4

如何在HTML/CSS中执行此操作？（请检查图像）如何在HTML中将一个图像置于另一个图像的顶部

2017-09-03 Mehedi

欢迎来到Stack Overflow。请回顾[我如何问一个好问题]（https://stackoverflow.com/help/how-to-ask）。这不是一个代码编写服务， - 预计你已经研究了你的问题，并且很好地尝试自己编写代码。如果您遇到某些特定问题，请回过头来，在[Minimal，Complete和Verifiable示例]（https://stackoverflow.com/help/mcve）中包含您尝试过的内容以及相关代码的摘要，以便我们可以帮帮我。 – FluffyKitten

为什么你不看那个页面的HTML和CSS，看看他们是怎么做到的？ – David

关于HTML + CSS的最好的事情是每个人都有他们的来源可供检查。 – tadman

下面是我为我的网站（它几乎没有从实际代码改变，所以有很多的无用的东西在CSS）。所有你需要做的就是复制/粘贴此文字并插入图片的网址。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <style> 
 
.div1{ 
 
\t border-style: hidden; 
 
\t background-image: url("yourImage.jpg"); 
 
\t background-color: red; 
 
\t background-size: 100% 100%; 
 
\t position: absolute; 
 
\t right: 0px; 
 
\t left: 0px; 
 
\t top: 10%; 
 
\t z-index: -2; 
 
\t padding: 10%; 
 
\t margin:0px; 
 
} 
 
.div2{ 
 
\t position: relative; 
 
\t top: 50%; 
 
\t background-color: rgba(153,194,255,0.8); 
 
\t z-index: 1; 
 
\t padding-right: 50px; 
 
\t padding-left: 50px; 
 
\t height:300px; 
 
\t width: 60%; 
 
\t min-width: 300px; 
 
\t margin: auto; 
 
} 
 

 
.myText{ 
 
\t margin: auto; 
 
\t padding: 50px; 
 
\t text-align: center; 
 
\t font-size: 1.5em; 
 
\t font-family: Verdana,sans-serif; 
 
\t width: 80%; 
 
\t height: 100%; 
 
} 
 
\t </style> 
 
</head> 
 
<body> 
 
\t <div class="div1"> 
 
\t <div class="div2"><p class="myText">hey</p></div> 
 
\t </div> 
 
\t 
 
</body> 
 
</html>

下一次，也许多做一点研究，但嘿...大家都懒过一段时间，对吧！？

来源

2017-09-03 19:38:34

如何在HTML中将一个图像置于另一个图像的顶部

回答

相关问题