如果它与图片重合,如何使文本消失?

2022-10-15 02:11:35标签htmlcssfont-size
提问

一个网页由一首诗来说明。文本是用2列写在一张图上。你可以在这里看到它: http://chemindevie。bzh/的 我用大众的单位写了字体大小,但文本仍然比它的周围框架(图片)要慢。如果我减少屏幕大小,它就会溢出。 到那时,无论如何,它变得太小了,无法阅读,所以我想说: 如果文本的顶部接近图片的顶部(例如,图片高度的5%以内),显示的是文本和框架。 它不需要与图片的顶部相关,如果字体大小< = 8px,既不显示文本也不图片。 我试着在图片上写课文,把它们放在一起。png文件,但看起来不太好。 我该怎么做呢? 所有的建议都是受欢迎的。 片段: 有两种有用的方法: 夹紧(最小优先度)让你设置最小的字体可以去做你想要的和它会扩展到的最大值。 Calc(N)px + M。vw可以让像素测量(px)与屏幕宽度依赖的测量(vw)相结合。 使它完全消失: 加上这个 然后在文本和图片周围创建一个div,或者在现有的div中添加一个类名(它们可以有多个类名)。

<meta name=鈥漹iewport鈥?content=鈥漺idth=device-width, initial-scale=1.0鈥?gt;
<style>
@media only screen and (max-width: 300px) {
  .image {
    display: none;
  }
(...)
.columns{
  width: 100%;
  column-count: 2;
  }
 /* Container holding the border image and the text */
.container {
  position: relative;
  color: purple;
  margin-right: 35px;
  margin-left: 35px;
}
/* Centered text in border */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  font-size:1.2vw;
} 
</style>
<div class="container">
  <img src="borderFlat.png" alt="Border" style="width:100%;">
<!--  <div class="bottom-left">Bottom Left</div>
  <div class="top-left">Top Left</div>
  <div class="top-right">Top Right</div>
  <div class="bottom-right">Bottom Right</div>-->
  <div class="centered">
  <div class="columns">
<p align="center">
(... poem text here...)
</p>
</div> <!--Closes columns-->
</div> <!--Closes centered-->
</div> <!--Closes container-->

@media only screen and (max-width: 300px) {
  .image {
    display: none;
  }
}
p,
h3,
h4 {
  margin-right: 35px;
  margin-left: 35px;
}
img {
  /*width: 100%;*/
  height: auto;
}
.columns {
  width: 100%;
  column-count: 2;
}
/* Container holding the border image and the text */
.container {
  position: relative;
  color: purple;
  margin-right: 35px;
  margin-left: 35px;
}
/* Centered text in border */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  font-size: 1.2vw;
}
<meta name=鈥漹iewport鈥?content=鈥漺idth=device-width, initial-scale=1.0鈥?gt;
<div class="container">
  <img src="http://chemindevie.bzh/borderFlat.png" alt="Border" style="width:100%;">
  <div class="centered">
    <div class="columns">
      <p align="center">
        Tu me dis que ta vie n'a aucun sens<br> Que tu souffres en attendant le lendemain<br> Si c'est vraiment l&agrave; ce que tu penses<br> Si tu crois ne pas avoir trouv&eacute; ton destin<br> Si tellement lourde est ta souffrance<br> Si tu veux vraiment
        d&eacute;couvrir ton chemin<br> Accepteras-tu d'entrer dans la danse<br> Et d'y attraper ma main ?<br> Les yeux qui s'ouvrent peuvent &ecirc;tre douloureux<br> L'&acirc;me qui se cherche se pose des milliers de questions<br> Souffres-tu assez
        pour vouloir &ecirc;tre heureux<br> Et au font de toi trouver les solutions&nbsp;?<br> Un &eacute;pais brouillard est l&agrave; qui t'entoure<br> Tu marches droit aveugl&eacute; en pleurs<br> Essuies tes yeux, tu es &agrave; un carrefour<br> Tu
        as le choix entre avancer et attendre<br> Tu as le choix entre vivre et souffrir<br> Il n'y a qu'en toi que tu puisses prendre<br> Le chemin qui changera ton avenir<br> Prends ta d&eacute;cision en toute conscience<br> Car on est seul responsable
        de sa vie<br> Accepte, et marche en confiance<br> Parcours le chemin que tu t'es choisi<br> Que d&eacute;cides-tu ?<br>
      </p>
    </div>
    <!--Closes columns-->
  </div>
  <!--Closes centered-->
</div>
<!--Closes container-->

回答

p {
  font-size: clamp(2rem, 4vw + 1rem, 3rem);
  }

p {
  font-size: calc(16px + 1vw);
  }
回答

<style>
@media (min-width:1px) and (max-width: 587px) {.hide-small{display:none!important}}
</style>

<div class="hide-small">

▼版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说cuoshuo.com——程序员的报错记录

部分内容根据CC版权协议转载,如果您希望取消转载请发送邮件到cuoshuo8@163.com

辽ICP备19011660号-5