Question

我试图在图片上添加内容但是我不知道在哪里放置代码。当我把它放在所有东西之上时，它优先，我的代码都没有显示。然而，当我将图像放置在正文CSS中时，它会显示但是我在将下一行代码放在图像末尾而不是在我最后一行代码下面的图像上时遇到问题，在这种情况下是现在购买。我很确定我把IMG代码放错了。我感谢任何人的帮助。

HTML：

<body>
<div class="Image">
<img src="C:\Users\Gabriel\Downloads\Green-blur.jpg"/>
<ul id="nav">
    <li id="brand"><a href="#">MINIMAL</a></li>
    <li id="navm"><a href="#">Men</a></li>
    <li id="navm"><a href="#">Women</a></li>
    <li id="navm"><a href="#">Contact</a></li>
</ul>

<h1>Simplicity is Minimal</h1>

<div id="home">
<a href="#" id="homeb">Shop Now</a>
</div>

</div>

</body>

CSS：

<!--Content from code shows-->
body {
background-image: url();
background-size: 100% 130%;
background-repeat: no-repeat;
font-family: "PT Sans", sans-serif;

}
<!--IMAGE TAKES PRIORITY-->
img {
height: 1000px;
background-repeat: no-repeat;
}

Answer 1

这样的东西？

body {
font-family: "PT Sans", sans-serif;
}

.image {
  background: url("https://www.blogcdn.com/www.joystiq.com/media/2011/06/respawngameblurryimage530pxheaderimg.jpg");
  background-size: cover;
}

li {
  display: inline-block;
  padding-right: 10px;
}

li a{
  color: white;
}

<div class="image">
<ul id="nav">
    <li id="brand"><a href="#">MINIMAL</a></li>
    <li id="navm"><a href="#">Men</a></li>
    <li id="navm"><a href="#">Women</a></li>
    <li id="navm"><a href="#">Contact</a></li>
</ul>

<h1>Simplicity is Minimal</h1>

<div id="home">
<a href="#" id="homeb">Shop Now</a>
</div>

</div>

注意：删除了HTML中的图片并将其添加到CSS中。

希望有所帮助

Answer 2

我从您的问题中了解到，您希望将内容放在图像上。您可以通过使用背景图像来实现此目的，但对于背景图像，您必须提供正确的图像路径。

在你的代码中 background-image：url（＆＃39;图片路径＆＃39;）： background-size：contains;

从html中删除图片代码。

Answer 3

从它的外观来看，我认为您希望该图片成为body的背景，因此您可以将src的{{1}}移动到img background-url()上的{1}}属性。如果您希望背景跨越浏览器窗口的整个高度，请将body添加到min-height: 100vh;。

＆＃13;

body

＆＃13;

body {
  background-image: url(http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg); /* put your "C:\Users\Gabriel\Downloads\Green-blur.jpg" image here */
  background-size: 100% 130%;
  background-repeat: no-repeat;
  font-family: "PT Sans", sans-serif;
  min-height: 100vh;
}

＆＃13;

Answer 4

有两种方法可以考虑图像和内容。一种方法是将背景图像添加到内容所在的元素中。在其他情况下，您需要使用图像来保持比例，然后使用绝对定位将内容置于“顶部”。

标记

<header>
  <div class="stuff">Stuff here... example with background image</div>
</header>

<!-- OR -->

<div class="thing">
  <img src="https://placehold.it/1600x900" alt="">
  <div class="text">
    Stuff here... example with absolute and relative positioning
  </div>
</div>

样式

header { /* background image example */
  background-color: lightblue;
  padding: 10px;
  background-image: url(https://placehold.it/1600x900);
}

.thing img {
  display: block; /* so the image responds to it's parent */
  width: 100%; /*  */
  height: auto; /*  */
}

.thing { /* absolute position example */
  position: relative; /* so it is the new boundery for children that are absolute */
  max-width: 600px;
}

.thing .text {
  position: absolute; /* this will take it out of the flow but let you position it based on parent */
  top: 0;
  left: 0;
  padding: 1rem;
}

示例：https://docs.unity3d.com/ScriptReference/Texture2D.GetPixels.html

图像显示在内容

4 个答案: