如何解决调整文本框的高度
当您将鼠标悬停在文本上时,我正在尝试在图像上显示文本。使用下面的代码,我已经设法做到了,但是遇到了一个问题。我想根据自己的喜好调整文本框的高度。就像您在CSS上看到的那样,我使文本稍微可见,但是由于文本框中有很多文本,因此它几乎覆盖了我图像的一半。我想调整文本框,使其至少覆盖图像的1/4,但是当我放高后,网站崩溃了。有人可以告诉我如何调整文本框的高度吗?
-HTML ---
<div class="gallery" id="nasaNews">
<img src="NasaLive.jpg" />
<div class="overlay">
NASA is now live-streaming views of Earth from space captured by four commercial high-definition video cameras that were installed on the exterior of the International Space Station last month. The project,known as the High Definition Earth Viewing (HDEV) experiment,aims to test how cameras perform in the space environment. You can see the live HD views of Earth from space above.To view the Nasa Live follow the Youtube Link:
</div>
</div>
--- CSS ---
#nasaNews {
position: relative;
}
#nasaNews div {
position: absolute;
resize: both;
min-height: 10px;
line-height: 20px;
bottom: 0;
right: 5px;
background: white;
color: black;
margin-bottom: 5px;
font-family: 'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
opacity: 0.5;
visibility: visible;
-webkit-transition: visibility 0s,opacity 0.5s ease-in-out;
transition: visibility 0s,opacity 0.5s ease-in-out;
}
/* Hover on Parent Container */
#nasaNews:hover {
cursor: pointer;
}
#nasaNews:hover div {
width: inherit;
height: inherit;
visibility: visible;
opacity: 1;
text-align: center;
}
解决方法
这应该可以解决问题。黄色是您的形象。
您错的地方是您忘记为父容器类#nasaNews设置高度和宽度。
#nasaNews {
overflow: hidden;
position: relative;
padding: 15px 15px;
box-sizing: border-box;
width: 250px;
height: 250px;
}
.myimg {
top: 0;
left: 0;
right: 0;
position: absolute;
background-color: yellow;
height: 100%;
width: 100%;
}
#nasaNews .overlay {
top: 0;
right: 0;
left: 0;
position: absolute;
resize: both;
line-height: 20px;
background: #0000007a;
color: white;
box-sizing: border-box;
padding-top: 45px 10px;
height: 100%;
font-family: 'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
overflow-x: auto;
resize: none;
opacity: 0;
text-align: center;
-webkit-transition: visibility 0s,opacity 0.5s ease-in-out;
transition: visibility 0s,opacity 0.5s ease-in-out;
}
/* Hover on Parent Container */
#nasaNews:hover {
cursor: pointer;
}
#nasaNews:hover .overlay {
opacity: 1;
height: 100%;
text-align: center;
}
<div class="gallery" id="nasaNews">
<img src="NasaLive.jpg" class="myimg" alt="My Image" />
<div class="overlay">
NASA is now live-streaming views of Earth from space captured by four commercial high-definition video cameras that were installed on the exterior of the International Space Station last month. The project,known as the High Definition Earth Viewing (HDEV)
experiment,aims to test how cameras perform in the space environment.
You can see the live HD views of Earth from space above.To view the Nasa Live follow the Youtube Link:
</div>
</div>
,
您可以使用CSS进行控制,有一些选择:
溢出:隐藏->所有溢出的文本将被隐藏。
溢出:可见->让文本溢出可见。
溢出:滚动->如果文本溢出,则放置滚动条
自动换行:断行->自动换行,而不是隐藏或制作滚动条
将这些属性放入包含文本的div中。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。