1

私はこのCSSカードに苦労しています。背景画像の上に置きたいのですが、方法がわかりません。すでに配置を試みました誤って背景画像をヘッダーに配置しましたが、divに変更しましたが、それでも変わりませんうまくいかない 誰か助けてくれる？

* {
  margin: 0;
  padding: 0;
  font-family: 'Century Gothic';
}

img {
  width: 100%;
}

.header {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(images/foto_beginpagina.jpg);
  height: 100vh;
  background-size: cover;
  background-position: center;
}

ul {
  float: right;
  list-style-type: none;
  margin-top: 25px;
}

ul li {
  display: inline-block;
}

ul li a {
  text-decoration: none;
  color: white;
  padding: 5px 20px;
  border: 1px solid white;
  transition: 0.6s ease;
}

ul li.huidig a {
  background-color: white;
  color: black;
}

ul li a:hover {
  background-color: white;
  color: black;
}

.head {
  margin-right: 25px;
}

.titel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.titel h1 {
  color: white;
  font-size: 70px;
}

div.ondertitel h3 {
  color: white;
  padding-top: 20px;
  max-width: 600px;
  left: 50%;
}

.card {
  position: absolute;
  margin: 30px;
  padding: 10px;
  background: rgb(139, 119, 167);
  background: radial-gradient(circle, rgba(139, 119, 167, 1) 0%, rgba(139, 122, 140, 1) 100%);
  min-width: 400px;
  max-width: 400px;
  border: 2px solid black;
}

.card-title {
  padding: 30px;
}

.card-image img {
  border-radius: 20%;
}
<html>

<body>
  <div class="header">
    <div class="head">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="geschiedenis.html">Geschiedenis</a></li>
        <li class="huidig"><a href="rand.html">Randapparatuur</a></li>
        <li><a href="opbouw.html">Opbouw van de computer</a></li>
      </ul>
    </div>
  </div>
  <div class="card">
    <div class="card-image">
      <img src="images/randapparatuur.jpg" alt="Randapparatuur">
    </div>
    <h1 class="card-title">Randapparatuur</h1>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis tortor id erat pellentesque sodales. Nulla ut pharetra lacus, nec facilisis tortor. Morbi egestas, erat a tempus finibus, lectus sapien condimentum odio, ut pretium arcu magna sed
      leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed id placerat orci, vitae laoreet sem. Praesent nulla lacus, interdum quis maximus at, ultricies laoreet orci. Praesent tempus eros ac fringilla aliquam.
      Fusce pharetra, mi eget aliquam vulputate, massa justo mattis arcu, in dictum quam libero a elit. Aliquam erat volutpat. Fusce vestibulum tincidunt commodo. Duis non mattis nisl, non condimentum tellus. Sed commodo aliquet augue vel tincidunt. Nunc
      eleifend nisi scelerisque odio fringilla, vel aliquet nisl imperdiet. Nulla ligula justo, sollicitudin a mollis non, viverra id odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    </p>
  </div>
</body>

</html>

無視: Lorem ipsum dolor sit amet, consectetur adipiscing elit. 容易にtortor id erat pellentesque sodales. Nulla ut pharetra lacus, nec facilisis tortor. Morbi egestas、erat a tempus finibus、lectus sapien condimentum odio、ut pretium arcu magna sed leo. faucibus orci luctus et ultrices posuere cubilia curaeのVestibulum ante ipsum primis。Sed id placerat orci, vitae laoreet sem. Praesent nulla lacus, interdum quis maximus at, ultricies laoreet orci. Praesent tempus eros ac fringilla aliquam. Fusce pharetra, mi eget aliquam vulputate, massa justo mattis arcu, in dictum quam libero a elit. Aliquam erat volutpat. Fusce vestibulum tincidunt コモド。Duis non mattis nisl, non condimentum tellus. Sed commodo aliquet augue vel tincidunt. Nunc eleifend nisi scelerisque odio fringilla, vel aliquet nisl imperdiet. Nulla ligula justo, sollicitudin a mollis non, viverra id odio. Pellentesque 居住者 morbi tristique senectus et netus et malesuada 名声 ac turpis egestas

4

2 に答える 2

-1

url(images/foto_beginpagina.jpg); これは間違っています

url("images/foto_beginpagina.jpg");正解です

quote('...')URLはシングルまたはダブルのパスを取るためquote("...")

于 2020-12-21T13:00:51.050 に答える