个人中心
gpt4 book ai didi

html - 如何使图像内容叠加显示在图像上？

转载 作者：太空宇宙 更新时间：2023-11-04 09:22:39 25 4
gpt4 key购买 nike

enter image description here我试图在用户将鼠标悬停在图像上时显示此叠加层，但它没有显示在我想要的位置。现在，当用户滚动到行中的第二个图像时，我会出现叠加层，但叠加层占用的高度比应有的高得多。

在此方面的任何帮助表示赞赏。我已经坚持了一段时间。

我正在使用来自 www.responsivegridsystem.com 的 grid.css 文件这就是为什么我在 div 中有 col 和 span 类，所以代码片段可能不会像我拥有的​​那样运行。

快速分解我有一个带有端口链接类的 div，我有一个带有 img 源的 anchor 标记。在我的 css 中，用户在端口链接上滚动应该出现内容覆盖。

这是代码。 

/*--#00b300*/

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body{
    background-color: #fff;
    color:#333333;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-size: 20px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

.clearfix{zoom: 1}
.clearfix:after{
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.row{
    max-width: 1240px;
    margin: 0 auto;
}

.row-small{
    max-width: 100%;
    margin: 0 auto;
}

section{
    padding: 80px 0;
}

h1,
h2{
    
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
}

h2{
    font-size: 250%;
    word-spacing: 2px;
    text-align: center;
    margin-bottom: 30px;
}

h2:after{
    display: block;
    height: 2px;
    background-color:  #00919b;
    content: " ";
    width: 180px;
    margin: 0 auto;
    margin-top: 20px;
}






/*-------------------PORTFOLIO----------------------*/

.section-portflio{
    color: #fff;
}

.port-links{
    height:300px;
}

.port-links img{

    width: 100%;
    height: 100%;
    
}


.content-overlay{
  background: rgba(0,0,0,0.9);
  position: relative;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.port-links:hover .content-overlay{
  opacity: 1;
}

.content-details {
  position: absolute;
  text-align: center;
  font-family: 'Raleway',sans-serif;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.port-links:hover .content-details{
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-details h3{
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.content-details p{
  color: #fff;
  font-size: 0.8em;
}

.fadeIn-bottom{
  top: 80%;
}
<html lang = "en-us">
    <head>
        <meta charset = "utf-8">
        <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type = "text/css" href="grid.css">
        <link rel="stylesheet" type = "text/css" href="css/animate.css">
        <link rel="stylesheet" type = "text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
        <link rel="stylesheet" type = "text/css" href="main.css">
         <link rel="stylesheet" type = "text/css" href="css/responsive.css">
        <link href="https://fonts.googleapis.com/css?family=Raleway:200,300,300i,400" rel="stylesheet">
        <title>Carlos Elizondo</title>
    </head>
    <body>
        
        
        <section class="scetion-portfolio">
            <div class="row">
                <h2>Portfolio</h2>
            </div>
            
            
               
               
            <div class="row">
                <a href="" >
                    <div class="col span-1-of-3 port-links">

                           <img src="images/omnifood-bg.PNG" alt="">
                           
                    </div>
                
                </a>
                
                
                   
                    <div class="col span-1-of-3 port-links">
                    <a href="" >
                        <img src="images/atlas.PNG" alt="">
                         <div class = "content-overlay"></div>
                             <div class="content-details fadeIn-bottom">
                                <h3 class="content-title">Project #1</h3>
                                <p class="content-text">Dallas Mavericks</p>
                            </div>
                        
                    </a>
                    
                </div>
                
                <div class="col span-1-of-3 port-links">
                    <a href="">
                        <img src="images/bg2.PNG" alt="">
                    </a>
                    
                </div>
            </div>
            
                  <div class="row">
                <div class="col span-1-of-3 port-links">
                    <a href="" >
                       <img src="images/vizion.PNG" alt="">
                    </a>
                    
                </div>
                
                <div class="col span-1-of-3 port-links">
                    <a href="" >
                        <img src="images/elizondo.PNG" alt="">
                    </a>
                    
                </div>
                
                <div class="col span-1-of-3 port-links">
                    <a href="">
                        <img src="images/mav-background.PNG" alt="">
                    </a>
                    
                </div>
            </div>
            
            
            
        </section>
        
       
    </body>
</html>

最佳答案

您需要将 position:relative 分配给每个部分的顶部元素 .port-links 并将 position:absolute 分配给 overlay 元素你想放在它上面的 (.content-overlay)

更新后的代码:

/*--#00b300*/

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body{
    background-color: #fff;
    color:#333333;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-size: 20px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

.clearfix{zoom: 1}
.clearfix:after{
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.row{
    max-width: 1240px;
    margin: 0 auto;
}

.row-small{
    max-width: 100%;
    margin: 0 auto;
}

section{
    padding: 80px 0;
}

h1,
h2{
    
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
}

h2{
    font-size: 250%;
    word-spacing: 2px;
    text-align: center;
    margin-bottom: 30px;
}

h2:after{
    display: block;
    height: 2px;
    background-color:  #00919b;
    content: " ";
    width: 180px;
    margin: 0 auto;
    margin-top: 20px;
}






/*-------------------PORTFOLIO----------------------*/

.section-portflio{
    color: #fff;
}

.port-links{
    height:300px;
    position:relative;
}

.port-links img{

    width: 100%;
    height: 100%;
    
}


.content-overlay{
  background: rgba(0,0,0,0.9);
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.port-links:hover .content-overlay{
  opacity: 1;
}

.content-details {
  position: absolute;
  text-align: center;
  font-family: 'Raleway',sans-serif;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.port-links:hover .content-details{
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-details h3{
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.content-details p{
  color: #fff;
  font-size: 0.8em;
}

.fadeIn-bottom{
  top: 80%;
}
<html lang = "en-us">
    <head>
        <meta charset = "utf-8">
        <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type = "text/css" href="grid.css">
        <link rel="stylesheet" type = "text/css" href="css/animate.css">
        <link rel="stylesheet" type = "text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
        <link rel="stylesheet" type = "text/css" href="main.css">
         <link rel="stylesheet" type = "text/css" href="css/responsive.css">
        <link href="https://fonts.googleapis.com/css?family=Raleway:200,300,300i,400" rel="stylesheet">
        <title>Carlos Elizondo</title>
    </head>
    <body>
        
        
        <section class="scetion-portfolio">
            <div class="row">
                <h2>Portfolio</h2>
            </div>
            
            
               
               
            <div class="row">
                <a href="" >
                    <div class="col span-1-of-3 port-links">

                           <img src="images/omnifood-bg.PNG" alt="">
                           
                    </div>
                
                </a>
                
                
                   
                    <div class="col span-1-of-3 port-links">
                    <a href="" >
                        <img src="images/atlas.PNG" alt="">
                         <div class = "content-overlay"></div>
                             <div class="content-details fadeIn-bottom">
                                <h3 class="content-title">Project #1</h3>
                                <p class="content-text">Dallas Mavericks</p>
                            </div>
                        
                    </a>
                    
                </div>
                
                <div class="col span-1-of-3 port-links">
                    <a href="">
                        <img src="images/bg2.PNG" alt="">
                    </a>
                    
                </div>
            </div>
            
                  <div class="row">
                <div class="col span-1-of-3 port-links">
                    <a href="" >
                       <img src="images/vizion.PNG" alt="">
                    </a>
                    
                </div>
                
                <div class="col span-1-of-3 port-links">
                    <a href="" >
                        <img src="images/elizondo.PNG" alt="">
                    </a>
                    
                </div>
                
                <div class="col span-1-of-3 port-links">
                    <a href="">
                        <img src="images/mav-background.PNG" alt="">
                    </a>
                    
                </div>
            </div>
            
            
            
        </section>
        
       
    </body>
</html>

关于html - 如何使图像内容叠加显示在图像上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41393329/

25 4 0
文章推荐： html - 媒体查询 - iOS 设备
文章推荐： linux - 我可以删除 linux-generic-lts-vivid 吗？
文章推荐： linux - 在子目录中搜索相同的文件并替换所有子目录中的字符串
文章推荐： linux - 文件到字符串和字符串到 bash 中的文件
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com