html - 如何轻松地在图像中间制作文字标题

好的，所以我一直在对我的网站进行一些翻新，我正在努力做到在主页上看到几张图片，我想要发生的是，当你将鼠标悬停在图片上时，它会变得模糊并且并且文本出现在图像的中心。我已经能够使图像模糊，但问题是我发现论坛上的所有教程和问答都使用绝对定位。

当我这样做时，我最终得到的是所有图像都堆叠在一起。然后我将 div 放在每个图像周围并使图像相对定位。结果是一样的。我在验证器中检查了我的代码，结果没有任何错误。我真的需要一些帮助。

这是我当前的设置(图像在我想要的位置，悬停时会模糊) https://jsfiddle.net/u9smc561/ 这是我的 HTML

 <!-- title div -->       
 <div id="head">

     <img src=http://www.mem3500films.minksfamily.com/pic/title.png alt="title" class="M35F">

 </div>

 <!-- menu bar line for anything bigger than 800px -->
 <div class="menuBar line">

     <img class='menu home' src=http://www.mem3500films.minksfamily.com/pic/home.png alt="Home" onclick="window.location='index.html';">
          <img class="blank" src=http://www.mem3500films.minksfamily.com/pic/blank.png alt="b">

     <img class='menu about' src=http://www.mem3500films.minksfamily.com/pic/about.jpg alt="About" onclick="window.location='About.html';">
          <img class="blank" src=http://www.mem3500films.minksfamily.com/pic/blank.png alt="b">

     <img class='menu comment' src=http://www.mem3500films.minksfamily.com/pic/comment.jpg alt="Comments" onclick="window.location='Comments.html';">
          <img class="blank" src=http://www.mem3500films.minksfamily.com/pic/blank.png alt="b">

     <img class='menu pic' src=http://www.mem3500films.minksfamily.com/pic/pic.png alt="Pictures" onclick="window.location='Pictures.html';"> 
          <img class="blank" src=http://www.mem3500films.minksfamily.com/pic/blank.png alt="b">

     <img class='menu active' src=http://www.mem3500films.minksfamily.com/pic/active.png alt="Activities" onclick="window.location='games.html';">
          <img class="blank" src=http://www.mem3500films.minksfamily.com/pic/blank.png alt="b">

 </div>



 <!-- menu bar line for anything smaller than 800px -->
 <div class="smenuBar" style="font-size: 2px;">
     <nav>
         <ul>
            <li class="line">
               <img class='menuPic menu' src=http://www.mem3500films.minksfamily.com/pic/mobileMenu.png alt="Menu">
               <ul class="selector"> 
                  <li><img class='menu' src=http://www.mem3500films.minksfamily.com/pic/home.png alt="Home" onclick="window.location='index.html';"></li>
                  <li><img class='menu' src=http://www.mem3500films.minksfamily.com/pic/about.jpg alt="About" onclick="window.location='About.html';"></li>
                  <li><img class='menu' src=http://www.mem3500films.minksfamily.com/pic/comment.jpg alt="Comments" onclick="window.location='Comments.html';"></li>
                  <li><img class='menu' src=http://www.mem3500films.minksfamily.com/pic/pic.png alt="Pictures" onclick="window.location='Pictures.html';"></li>
                  <li><img class='menu' src=http://www.mem3500films.minksfamily.com/pic/active.png alt="Activities" onclick="window.location='games.html';"></li>
               </ul>
           </li> 
           <li class="close">
           <img src=http://www.mem3500films.minksfamily.com/pic/close.png alt="Close" style="margin-top: 5px;">
           </li>
        </ul>
    </nav>
 </div>






 <!-- Explanation area -->
 <br>
 <br>MEM 3500 Films is a collection of stop-motion animated videos. 
 <br>To learn more about MEM 3500 Films check out the About Page.
 <br>Just click on the movie poster to go to that movies page where you can watch it.      


 <!-- main div section with the posters -->
 <div style="margin-left:0%; margin-right:0%; width:100%; text-align:left;font-size: 25px">

     <br>
     <br>
     <div class="left">
           <img class="poster1" src=http://www.mem3500films.minksfamily.com/pic/tcb.png alt="The Coffee Break" />
           <br>
           <img class="poster1" src=http://www.mem3500films.minksfamily.com/pic/tvsr.png alt="tvsr" />
           <br>
           <img class="poster" src=http://www.mem3500films.minksfamily.com/pic/lt.james.png alt="Lt. James">
           <br>
           <img class="poster" src=http://www.mem3500films.minksfamily.com/pic/TRR.jpg alt="The robbers race">
           <br>
           <img class="poster" src=http://www.mem3500films.minksfamily.com/pic/TFP.jpg alt="The French Plane">

     </div>


     <div class="right">
           <img class="poster1" src=http://www.mem3500films.minksfamily.com/pic/MKI6.png alt="MKI6" />
           <br>
           <img class="poster" src=http://www.mem3500films.minksfamily.com/pic/TPSPoster.png alt="tps">
            <br>
           <img class="poster1" src=http://www.mem3500films.minksfamily.com/pic/ag.jpg alt="The Air-to-Ground Attack">
           <br>
           <img class="poster" src=http://www.mem3500films.minksfamily.com/pic/tcp.jpg alt="The Counterfeiters">
           <br>
           <img class="poster" src=http://www.mem3500films.minksfamily.com/pic/mem3500films.jpg alt="mem 3500 films">

     </div>     
     <br> 
     <br>
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 
     <br> 

     <br>
     <br> 
     <br> 
     <br> 
     <br> 
     <br>  
</div>       

     <!-- footer credits -->
     <div style="width:100%; text-align:center; font-size: 25px;">
        <br>
        <footer style="">LEGO, the LEGO logo, and the Minifigure are trademarks and/or copyrights of the LEGO Group. I am not supported by LEGO or in any way is this website. Check out the LEGO website for more cool stuff. <a href="http://www.lego.com/">LEGO.com</a> 
           <br>
           <p style="margin: 0;">
             <a href="http://jigsaw.w3.org/css-validator/check/referer">
               <img style="border:0; width:88px; height:31px; margin: 10px;" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" />
             </a>
           </p>
        </footer>
     </div>

还有我的 CSS

/* makes the  stuff for the tall posters */
.poster {
     -webkit-transition: -webkit-filter 0.4s;
        -moz-transition: -webkit-filter 0.4s;
         -ms-transition: -webkit-filter 0.4s;
          -o-transition: -webkit-filter 0.4s;
             transition: -webkit-filter 0.4s;
     width: 100%;
     border-radius: 15px;
     max-width: 450px;
     max-height: 601px;
}

.poster:hover{
    -webkit-filter: blur(7px);
    filter: blur(7px);
}



/* makes the  stuff for the wide posters */
.poster1 {
     -webkit-transition: -webkit-filter 0.3s;
        -moz-transition: -webkit-filter 0.3s;
         -ms-transition: -webkit-filter 0.3s;
          -o-transition: -webkit-filter 0.3s;
             transition: -webkit-filter 0.3s;
     width: 100%;
     border-radius: 15px;
     max-width: 450px;
     max-height: 260px;
}

.poster1:hover{
    -webkit-filter: blur(7px);
    filter: blur(7px);
}







/* the main div holders for the posters */
.left {
    width: 49%;
    display: inline-block;
    margin-left: 1px;
    text-align: right;
}

.right {
    width: 49%;
    display: inline-block;
    margin-right: 0px;
    text-align: left;
}

  /* the menu bar stuff */
@media only screen
and (min-width : 801px) {
.menuBar {    
     display: block;
}

.smenuBar, .close{    
     display: none;
}

/* makes sure the buttons are not to big */
.home {
    width: 10.1%;
    max-width: 107px;  
}

.about {
    width: 11.1%;
    max-width: 117px;  
}

.comment {
    width: 16.7%;
    max-width: 173px;  
}

.pic {
    width: 16.8%;
    max-width: 174px;  
}

.active {
    width: 16.1%;
    max-width: 167px;  
}

.blank {
    width: 1%;
    max-width: 3px;
    max-height: 25px;
    margin-top: 10px;
    margin-bottom: 10px;
}


/* makes the hover effect for the menu buttons */
.menu {
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
    -webkit-transition: -webkit-filter 0.5s; /* Safari */
    -moz-transition: -webkit-filter 0.5s;
    -ms-transition: -webkit-filter 0.5s;
    -o-transition: -webkit-filter 0.5s;
    transition: -webkit-filter 0.5s;

}

.menu:hover {
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
    -webkit-filter: invert(1); /* Safari */
    -moz-filter: invert(1);
    -ms-filter: invert(1);
    -o-filter: invert(1);
    filter: invert(1);

}

}
/* end of computer menu bar config */


/* start of mobile menu config */
@media only screen
and (max-width : 800px) {

/* stuff to make sure the other menu doesn't show */
.menuBar {    
     display: none;
}

.smenuBar, .close {    
     display: block;
}

.menuPic {
     width: 90%;
     max-width: 143px;
}

/* stuff to make sure there isn't indenting */
li {
     list-style-type: none;
     padding: 0;
}

ul {
     list-style-type: none;
     padding: 0;
     margin: 0;
}


/* drop down part of the menu stuff */
nav ul ul {
     height: 0px;
     overflow: hidden;
     -webkit-transition: height 0.5s; /* Safari */
        -moz-transition: height 0.5s;
         -ms-transition: height 0.5s;
          -o-transition: height 0.5s;
             transition: height 0.5s;
}

    nav ul .line:hover > ul {
        height: 335px;
    }

    nav ul .line:active > ul {
        height: 335px;
    }

    nav ul .line:hover + .close {
        height: 52px;
    }

    nav ul .line:active + .cose {
        height: 52px;
    }


.close {
    text-align: center;
    background:rgba(0,0,0,0.8);
    height: 0px;
    overflow: hidden;
    -webkit-transition: all 0.5s; /* Safari */
       -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
         -o-transition: all 0.5s;
            transition: all 0.5s;
}

/* makes the hover effect for the menu buttons */
.menu {
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
    -webkit-transition: -webkit-filter 0.5s; /* Safari */
    -moz-transition: -webkit-filter 0.5s;
    -ms-transition: -webkit-filter 0.5s;
    -o-transition: -webkit-filter 0.5s;
    transition: -webkit-filter 0.5s;

}

.menu:hover {
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
    -webkit-filter: invert(1); /* Safari */
    -moz-filter: invert(1);
    -ms-filter: invert(1);
    -o-filter: invert(1);
    filter: invert(1);

}

}

.selector {
      width: 100%;
      background-image:url('pic/wline.jpeg');
      padding: 0;
}


/* end of menu config */ 





/* sets the body properties */
body {
    background-image:url('http://www.mem3500films.minksfamily.com/pic/lego.jpeg');
    background-color: #ffd700;
    text-align:center; 
    font-size: 25px;
}


/* the title attributes */ 
body{margin:0;padding:0}
#head {
    background-image:url('http://www.mem3500films.minksfamily.com/pic/lego1.jpeg');
    background-repeat:repeat;
    width: 100%;
}

/*the menu line div attributes */
body{margin:0;padding:0}  
.line {
    background-image:url('http://www.mem3500films.minksfamily.com/pic/line.jpeg');
    background-repeat:repeat;
    width: 100%;

}



/* makes sure that the website title is not to big */ 
.M35F {
    width: 100%;
    max-width: 905px; 
    margin-top: 20px;
    margin-bottom: 20px;
}


/* makes sure links never get underlined */
a {
    text-decoration:none;
}

/* gives the footer a background image */
footer {
    background-image:url('pic/white.jpeg');
    background-repeat:repeat;
    text-align: left;
    background-color: #FFFFFF;
    color: #888888;
    font-size: 25px;
}

在我当前的设置中，我有它，所以图像随窗口调整大小，然后在一定尺寸时停止变大。这现在工作正常，我希望它最终能够做到这一点。

但我已经尝试了很多方法来让它工作并花费了数小时(字面意思)，但无论我做了什么，它似乎都不起作用。使用 CSS 和 HTML 甚至无法实现我所追求的目标吗？

最佳答案

记住一个重要的概念。绝对定位元素相对于位置不同于“静态”的第一个祖先定位因此，要定位您的“字符串”，您需要

将图片包裹在一个div中
使该 div 成为“position:relative”
将文本放在 div 或 span 或其他容器中
使容器成为“position: abolute”

这样一来，您就不会有图像在另一幅图像上染色的问题。

关于html - 如何轻松地在图像中间制作文字标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33734514/

html - 如何轻松地在图像中间制作文字标题

上一篇：css - 更改类属性 ng-class

下一篇：javascript - 基于具有功能、效率的属性设置样式