好吧所以我一直在对我的网站进行一些整修，我试图在主页上做到这一点，你看到几张图片，我想要发生的是，当你将鼠标悬停在图像上时，它会模糊不清和文字显示在图像的中心。我已经能够让图像变得模糊，但问题在于，我发现的所有教程和Q＆amp; A都使用了绝对定位。
当我这样做的时候，我最终将所有图像堆叠在一起。然后我在每个图像周围放置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拍摄的内容是不可能的？
答案 0 :(得分：0)
记住一个重要的概念。绝对定位元素相对于第一个ANCESTOR定位，其位置不同于静态＆＃34; 因此，要定位你的＆＃34;字符串＆＃34;你需要
通过这种方式，您不应该对使用另一个的图像存在问题。
答案 1 :(得分：0)
.poster p {
position:relative;
top:50%;
transform:translateY(-50%);
}
这会将自己定位在垂直中心。
将以下内容添加到.poster：
text-align:center;