html - CSS/HTML 中图像上的文本叠加问题

问题描述

我在为朋友构建的网站上的图像上叠加文本时遇到问题。有问题的页面是https://olangolangclay.com/art_en.html。当我在 Firefox 中将鼠标悬停在它上面时，文本根本不会出现。在 Chrome 中，它有时会出现并经常闪烁。在移动设备上点击图像时，在任一浏览器中，它似乎都没有出现。谁能看看这个 HTML 和 CSS 并让我知道我做错了什么？我知道足以彻底打破一切。我在 Dreamweaver 中完成了大部分工作，但在 Bluefish 中完成了一些。

@charset "utf-8";

/* CSS Document */

body {
  font-family: 'Noto Serif KR', serif;
  background-image: url("website_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.indexpage {
  background-color: #f1f4ed;
  background-image: none;
}

.indexpic {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.container {
  display: grid;
  max-width: 100%;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: .01fr .01fr .01fr .01fr .01fr .01fr;
  grid-template-areas: "nav nav nav nav" "header header header header" "intro intro intro intro" "img1 img1 img2 img3" "img1 img1 img4 img4" "footer footer footer footer";
  grid-gap: 5px;
}

nav {
  grid-area: nav;
  text-align: center;
}

nav a {
  text-decoration: none;
  color: #c3adc3;
}

header {
  grid-area: header;
  text-align: center;
  color: #c3adc3;
}

.intro {
  grid-area: intro;
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 50px;
  font-size: 1.5em;
  padding: 10px 20px 10px 20px;
  background: linear-gradient(#bab6b3, #efeeec);
  box-shadow: -5px 5px 5px #808080;
  text-align: justify;
  text-justify: inter-word;
}

.img1 {
  grid-area: img1;
}

.img1 img {
  width: 100%;
}

.text1 {
  display: none;
  background-color: rgba(128, 128, 128, 0.8);
  object-fit: scale-down;
  bottom: 0px;
  transition: all 0s ease-in-out;
  grid-area: img1;
}

.img1:hover+.text1 {
  display: block;
  color: #000000;
  font-weight: 600;
  object-fit: scale-down;
  max-width: 100%;
  flex: 1;
  min-height: 0;
  padding: 10px;
}

.img2 {
  grid-area: img2;
}

.img2 img {
  width: 100%;
}

.text2 {
  display: none;
  background-color: rgba(128, 128, 128, 0.8);
  object-fit: scale-down;
  bottom: 0px;
  transition: all 0s ease-in-out;
  grid-area: img2;
}

.img2:hover+.text2 {
  display: block;
  color: #000000;
  font-weight: 600;
  object-fit: scale-down;
  max-width: 100%;
  flex: 1;
  min-height: 0;
  padding: 10px;
}

.img3 {
  grid-area: img3;
}

.img3 img {
  width: 100%;
}

.text3 {
  display: none;
  background-color: rgba(128, 128, 128, 0.8);
  object-fit: scale-down;
  bottom: 0px;
  transition: all 0s ease-in-out;
  grid-area: img3;
}

.img3:hover+.text3 {
  display: block;
  color: #000000;
  font-weight: 600;
  object-fit: scale-down;
  max-width: 100%;
  flex: 1;
  min-height: 0;
  padding: 10px;
}

.img4 {
  grid-area: img4;
}

.img4 img {
  width: 100%;
}

.text4 {
  display: none;
  background-color: rgba(128, 128, 128, 0.8);
  object-fit: scale-down;
  bottom: 0px;
  transition: all 0s ease-in-out;
  grid-area: img4;
}

.img4:hover+.text4 {
  display: block;
  color: #000000;
  font-weight: 600;
  object-fit: scale-down;
  max-width: 100%;
  flex: 1;
  min-height: 0;
  padding: 10px;
}

footer {
  grid-area: footer;
  text-align: center;
}

@media only screen and (max-width: 700px) {
  .container {
    display: grid;
    font-size: 1em;
    max-width: 100%;
    height: 100vh;
    grid-template-columns: 1fr;
    grid-template-areas: "nav" "header" "intro" "img1" "img2" "img3" "img4" "footer";
  }
  header img {
    width: 100%;
  }
  .intro {
    margin: 10px;
  }
  .img1 img {
    width: 100%;
    text-align: center;
  }
   :lang(ko).text1 {
    font-size: .9em;
  }
   :lang(en).text1 {
    font-size: .8em;
  }
  .img2 img {
    width: 100%;
    text-align: center;
  }
  .img3 img {
    width: 100%;
    text-align: center;
  }
  .img4 img {
    width: 100%;
    text-align: center;
  }
   :lang(ko).text4 {
    font-size: .95em;
  }
   :lang(en).text4 {
    font-size: .8em;
  }
}

@media only screen and (max-width: 500px) {
  .container {
    display: grid;
    font-size: 1em;
    max-width: 100%;
    height: 100vh;
    grid-template-columns: 1fr;
    grid-template-areas: "nav" "header" "intro" "img1" "img2" "img3" "img4" "footer";
  }
  header img {
    width: 100%;
  }
  .intro {
    margin: 10px;
  }
  .img1 img {
    width: 100%;
    text-align: center;
  }
   :lang(ko).text1 {
    font-size: .7em;
  }
   :lang(en).text1 {
    font-size: .6em;
  }
  .img2 img {
    width: 100%;
    text-align: center;
  }
  .img3 img {
    width: 100%;
    text-align: center;
  }
  .img4 img {
    width: 100%;
    text-align: center;
  }
   :lang(ko).text4 {
    font-size: .85em;
  }
   :lang(en).text4 {
    font-size: .6em;
  }
}

<div class="container">
  <nav><a href="art_en.html">English</a> | <a href="art_ko.html"><span lang="ko">한국어&lt;/span></a></nav>
  <header><img src="korean_banner.png" alt="Olang Olang Hanbok Clay"><br>
    <p>By Olang Olang</p>
  </header>
  <div class="intro">
    <p>Annyeong ha sae yo! = Hello! I am OlangOlang, a clay artist. I have made art pieces focusing on Hanboks (traditional Korean clothing) by using clay known as “I clay,” which is widely available and commonly used in Korea. Hence, this website was made
      to introduce my art pieces. The main theme of my artwork is the Hanbok. Hanboks were created during the ancient Korean dynasties of Goguryo (1st century BC ~ 668 AD), Baekjae (18 BC ~ 660 AD) and Silla (57 BC ~ 935 AD). The Hanbok has been the traditional
      clothing of Korea from these ancient dynasties all the way to the present. You can easily find the current Hanbok style from historical documents, especially from the Joseon Dynasty, the last dynasty in Korea.</p>
    <p>I make works of art with different themes as well.</p>
    <p>When you click the big picture of the art piece, the whole description appears. The smaller pictures include descriptions of specific parts of the artwork. Some small pictures will be uploaded without explanation as I would like you to imagine something
      or enjoy it simply without complicated thoughts, just looking at the pictures. (However, I do not accept distorted perspectives of my work.)</p>
    <p>I do not have any big wish, but I hope that you have a good short break while looking at my work.</p>
    </p>
    </p>
  </div>
  <div class="img1"> <img src="1.png"> </div>
  <div class="text1">
    <p><span lang="ko">이내</span> Inae (time right after sunset), <span lang="ko">안부</span> Anboo,(give them my regards)</p>
    <p>I created this object to indicate time and life. I had thought of Cheolik (the clothing shown in the picture) among many different types of Hanboks (traditional Korean clothes). The black and white were used to express that time goes by. Imagine the
      spectrum of emotions with time going by over one’s life. There was also an image about the Cheolik worn by somebody when that person has experienced all sorts of emotions in life. In other words, I would like to express that the Cheolik could symbolize
      life.</p>
    <p><span lang="ko">안부</span> Anboo, a part of the title, signifies that someone would like to send one’s wishes to people who were with one during a happy time by reminiscing about memories with them in his or her life. <span lang="ko">이내</span> Inae,
      a pure Korean word, means the time right after sunset which includes the sky with some bluish light. In French, it is known as the time between dog and wolf. This indicates the time which has no boundary between day and night. I came up with all
      different emotions throughout lives by thinking of the meaning of Inae. People have had each feeling at all different times, but these emotions have existed though connections with no boundaries in time flowing away.</p>
    <p>A trait of Inae: it shows an ambiguous boundary. ≒ life: it indicates all sorts of human emotions with unclear boundaries. + Cheolik ㅡ&gt; Title…&lt;/p>
  </div>
  <div class="img2"> <img src="2.png"> </div>
  <div class="text2">
    <p>I have done some research on methods of interpreting old oriental paintings. One branch of an apricot flower could represent “sending one’s regards to them.” This leads me to imagine giving my regards to people sharing good memories with me whom I
      cannot see anymore.</p>
  </div>
  <div class="img3"> <img src="3.png"> </div>
  <div class="text3">
    <p>It is hard to tell whether the oncoming waves would help the rower or make it more difficult for the rower. However, I heartily hope that the boat will eventually reach where the rower wants it to go.</p>
  </div>
  <div class="img4"> <img src="4.png"> </div>
  <div class="text4">
    <p>Cheolik is one type of Hanbok (Hanbok: traditional Korean clothes) in Korea. It is made by combining a collar, a top and a bottom (skirt) cut out separately. When they are combined, pleats on the skirt are made around the waist. Cheolik was loved
      mainly by the male noble class and was formal clothing mainly for men in the Joseon Dynasty (1392 ~ 1910, last dynasty in Korea). They wore the Cheolik as daily clothing. Government officials wore it when they were dispatched as envoys, had a national
      crisis, or when escorting the king whenever the king left the palace. The word <span lang="ko">철릭</span> Cheolik was shown first as <span lang="ko">텰닉</span> from a song named Jeong suk during the Goryeo Dynasty (the dynasty right before Joseon).</p>
  </div>
  <footer>&copy;2021 Olang Olang Hanbok Clay</footer>
</div>

标签： htmlcss

html - CSS/HTML 中图像上的文本叠加问题

问题描述

解决方案

推荐阅读