问如何将文本的有效区域限制在其兄弟图像上？
EN

Stack Overflow用户

提问于 2021-07-22 04:55:30

回答 1查看 41关注 0票数 0

我有两个圆角作为按钮的图像。当鼠标指针悬停在这些图像上时，图像就会模糊，文本就会出现。问题是，文本行的有效区域大于图像显示大小。我想让文本在图像边界上有效。我怎样才能解决这个问题？我使用了以下HTML/CSS代码：

<!DOCTYPE html>
<html lang="fa">
    <head>
        <title>]Information System</title>
        <style>
            #main-image{
                display: block;
                margin-left: auto;
                margin-right: auto;
                max-width: 100%;
                max-height: auto;
            }
            h1{
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                color:floralwhite;
                user-select: none;
            }
            .sub-image{
                border-radius: 5%;
            }
            .container{
                float: left;
                width: 20%;
                padding: 5%;
            }
            .image-text{
                opacity: 0;
                transition: 0.5s;
            }
            .sub-image:hover {
                opacity: 0.3;
                transition: 0.5s;
            }
            .sub:hover .image-text{
                opacity: 1;
                transition: 0.5s;
            }
            .row::after{
                clear: both;
            }
            .container{
                position: relative;
                text-align: center;
            }
            .container .image-text{
                position: absolute;
                left: 0;
                right: 0;
                top: 60%;
                text-align: center;
                color: cornsilk;
            }


        </style>
    </head>
    <body bgcolor="black">
        <div>
            <img id="main-image" src="Images/IT.jpg" width="1600" alt="Intro">
        </div>
        <hr>
        <div class="row">
            <div class="container">
                <a href="https:www.google.com">
                    <div class="sub">
                        <img class="sub-image" src="Images/repair.jpg" width="300">
                        <div class="image-text">
                            <h1>Failures</h1>
                        </div>
                    </div>
                </a>
            </div>
            <div class="container">
                <a href="https:www.google.com">
                    <div class="sub">
                        <img class="sub-image" src="Images/Equipment.jpg" width="300">
                        <div class="image-text">
                            <h1>Equipments</h1>
                        </div>
                    </div>
                </a>

            </div>
        </div>
    </body>
</html>

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-07-22 05:14:12

您可以添加下面的css。这将确保h1相对于子类被定位，并且任何溢出都将被隐藏。如果不想显示更多的文本，则可以删除文本溢出省略号。

            .sub{
                position: relative;
            }
            .image-text h1{
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

若要在文本悬停时模糊背景，请使用.sub的父选择器而不是. selector，如下所示

            .sub:hover .sub-image {
                opacity: 0.3;
                transition: 0.5s;
            }

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68479387

复制

相似问题

问如何将文本的有效区域限制在其兄弟图像上？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将文本的有效区域限制在其兄弟图像上？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将文本的有效区域限制在其兄弟图像上？
EN