时间戳

首页 > 解决方案 > 在 html 中分层图像和​​ div 大小

html - 在 html 中分层图像和​​ div 大小

问题描述

首先我想做的是让图像不通过固定按钮。这是它目前的样子： 第一期

正如你所看到的，这就是发生的事情。我究竟做错了什么？其次，如何缩放 div？我希望图像大小保持不变，但要解决 div 大小的问题。当前发生的情况是，当我将鼠标悬停在图像的右侧时，会显示悬停动画，但不应该 第 2 期 这是我的代码：

<html>
<head><title>Moja strona</title>
<style type=text/css>
h1 {text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff; font-size: 50px; color: white;}
body {background-color: 0d0d0d; font-family: "Vibur", sans-serif;}
p {text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff; color: white; font-size: 25px;}
span {font-size: 27px; }
li {text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff; color: white; font-size: 25px;}
img {height: 100px; width: 200px; padding: 10px 0px 0px 0px;}
.clock {background-color: 0d0d0d; text-align: center; margin: 2px 0px 0px 1190px; font-size: 30px; position: fixed; border-radius: 10px;   color: #fff; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; border: 5px solid white;}
.button2 {
    position: fixed;
    margin: 0px 0px 0px 0px;
    width: 610px;
    height: 65px;
    font-size: 25px;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
    background-color: rgba(13, 13, 13, 0);
    display: inline-block;
    transition-duration: 0.3s;
    border: 5px solid white;
    color: white;
    border-radius: 10px;
    background: linear-gradient(-45deg, #0d0d0d, #262626, #0d0d0d, #262626);
    background-size: 400% 400%;
    animation: gradient 10s linear infinite normal;
    height: 65px;
}
@keyframes gradient {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}
.button2:hover {margin: 0px 0px 0px 0px; width: 610px; height: 65px; font-size: 25px; background-color: ffffff; display: inline-block; transition-duration: 0.3s; border: 5px solid; border-color: 808080; color: white;}
.button2:active {text-shadow: 0 0 2px #808080, 0 0 4px #808080, 0 0 3px #808080; margin: 0px 0px 0px 0px; width: 610px; height: 65px; font-size: 25px; background-color: f2f2f2; display: inline-block; transition-duration: 0.3s; border: 4px solid; border-color: 808080; color: 808080;}
.button3 {
    position: fixed;
    margin: 0px 0px 0px 620px;
    width: 560px;
    height: 65px;
    font-size: 25px;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
    background-color: rgba(13, 13, 13, 0);
    display: inline-block;
    transition-duration: 0.3s;
    border: 5px solid white;
    color: white;
    border-radius: 10px;
    background: linear-gradient(-45deg, #0d0d0d, #262626, #0d0d0d, #262626);
    background-size: 400% 400%;
    animation: gradient 10s linear infinite normal;
    height: 65px;
}
@keyframes gradient {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}
.button3:hover {margin: 0px 0px 0px 620px; width: 560px; height: 65px; font-size: 25px; background-color: ffffff; display: inline-block; transition-duration: 0.3s; border: 5px solid; border-color: 808080; color: white;}
.button3:active {text-shadow: 0 0 2px #808080, 0 0 4px #808080, 0 0 3px #808080; margin: 0px 0px 0px 620px; width: 560px; height: 65px; font-size: 25px; background-color: f2f2f2; display: inline-block; transition-duration: 0.3s; border: 4px solid; border-color: 808080; color: 808080;}
.container {position: relative; width: 50%;}
.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 15%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
    color: ffffff;
    text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
  font-size: 25px;
  padding: 16px 32px;
}
</style>
</head>
<body>
  <p id="date" class="clock"></p>
  <script>
  setInterval(function(){
  date = new Date();
  sekundy = date.getSeconds();
  if (sekundy<10) sekundy = "0"+sekundy;
   minuty = date.getMinutes();
  if (minuty<10) minuty = "0"+minuty;
   godziny = date.getHours()
  if (godziny<10) godziny = "0"+godziny;
   dzien = date.getDay();
   data = date.getDate();
   miesiac = date.getMonth();
   rok = date.getFullYear();
  document.getElementById('date').innerHTML = data+"."+((miesiac+1)%12)+"."+rok+"<br><span>"+godziny+":"+minuty+":"+sekundy;
},1000);
  </script></span>
<a href="strona3.html"><button class="button2"><strong>O mnie</strong></button></a>
<a href="strona2.html"><button class="button3"><strong>Zainteresowania</strong></button></a>
<br><br><h1>Zainteresowania</h1>
<p><strong> Głównie interesuję się: <br>
<ul><li>Programowaniem <div class="container"><img src="programowanie2.png" class="image" style="width:30%"><div class="middle"><div class="text">Programowanie</div></div></div></li>
    <p>Około rok temu zrobiłem swoją pierwszą stronę w html. Obejrzałem serię poradników i później korzystałem z aplikacji i nauczyłem się baz <strong style="color: orange; text-shadow: 0 0 2px orange, 0 0 4px orange, 0 0 3px orange; ">HTML</strong> i <strong style="color: blue; text-shadow: 0 0 2px blue, 0 0 4px blue, 0 0 3px blue;">CSS</strong>. Pomagając bratu zrozumieć <strong style="color: yellow; text-shadow: 0 0 2px yellow, 0 0 4px yellow, 0 0 3px yellow;">C++</strong> poznałem jego podstawy. Około 3 tygodnie temu obejrzałem 1-godzinny poradnik dotyczący <strong style="color: lightgreen; text-shadow: 0 0 2px lightgreen, 0 0 4px lightgreen, 0 0 3px lightgreen; ">Pythona</strong> i nauczyłem się jak się nim posługiwać.<br>
    <li>Graniem w gry<div class="container"><img src="graniewgry.png" class="image" style="width:30%"><div class="middle"><div class="text">Granie w gry</div></div></div></li>
    <p>W wolnym czasie w celu odpoczynku lubię sobie pograć w różne gry. Najbardziej interesują mnie <strong style="color: darkgreen; text-shadow: 0 0 2px darkgreen, 0 0 4px darkgreen, 0 0 3px darkgreen; ">gry z wieloma graczami</strong> zamiast tylko ze samym sobą. Moimi ulubionymi gatunkami gier są <strong style="color: lightred; text-shadow: 0 0 2px lightred, 0 0 4px lightred, 0 0 3px lightred; ">MMO, RPG, Dungeon Crawler i wiele innych.</p>
    <br><li>Tworzeniem wideo<div class="container"><img src="nagrywanie.png" class="image" style="width:30%;"><div class="middle"><div class="text">Nagrywanie wideo</div></div></div></li>
    <p>Od kilku lat tworzę widea na platformie <strong style="color: red; text-shadow: 0 0 2px red, 0 0 4px red, 0 0 3px red; ">YouTube</strong>. Na obecną chwilę mam <strong style="color: red; text-shadow: 0 0 2px red, 0 0 4px red, 0 0 3px red; ">457 subskrybentów</strong>. Zazwyczaj wrzucam 1 wideo na tydzień. Posiadałem kilka kanałów, ale na tą chwilę posiadam tylko jeden. Moim celem jest <strong style="color: red; text-shadow: 0 0 2px red, 0 0 4px red, 0 0 3px red; ">1000 subskrybentów</strong>.
</strong></p>
</body>
</html>
我很乐意感谢任何帮助

标签： html

解决方案

推荐阅读