Maison > Questions et réponses > le corps du texte
Je suis relativement nouveau dans le CSS/html. Je parcours ce problème depuis un moment mais je n'ai pas trouvé de solution.
La question est la suivante : si j'utilise le code ci-dessous (en utilisant Bulma), que se passe-t-il en cas de img3.jpg
上悬停时,可点击区域是从第一个is-column
/ is-multiline
conflits entre et les définitions CSS remplacées que je fournis ?
<style type="text/css">
ul {
list-style: none;
padding: 10px 10px 10px 30px
}
ul li {
font-size: 120%;
margin-left: 10px;
list-style-type: circle;
}
</style>
<style>
.container {
position: relative;
width: 100%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
<div class="columns is-multiline">
<div class="column is-9">
<div class="content">
<h3> 关于我们 </h3>
<hr>
<p align="left" style="font-size:120%;">
一些内容...
</p>
</div>
<div class="columns is-multiline">
<div class="column is-4">
<img src="/images/img1.jpg" alt="" class="image"/>
</div>
<div class="column is-4">
<img src="/images/img2.jpg" alt="" class="image"/>
</div>
<div class="column is-4">
<div class="container">
<img src="/images/img3.jpg" alt="" class="image"/>
<div class="overlay">
<div class="text">你好,世界</div>
</div>
</div>
</div>
</div>
<p align="left" style="font-size:120%;">
一些文本...
<ul>
<li>
项目1
<a href="url1">
<b>链接</b>
</a>
</li>
<li>
项目2
<a href="url2">
<b>链接</b></a>
</li>
</ul>
</p>
</div>
<div class="column is-3">
{% include latest-posts.html %}
</div>
</div>
<hr>
P粉7383463802023-09-11 00:10:53
Essayez ce document
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"> <title>Document</title> <style> body { padding-top: 2em; } ul { list-style: none; padding: 10px 10px 10px 30px } ul li { font-size: 120%; margin-left: 10px; list-style-type: circle; } .container { position: relative; width: 100%; } .columns { display: flex; } .image { display: block; width: 100%; max-width: 320px; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: #008CBA; } .container:hover .overlay { opacity: 1; } .text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } .test { position: absolute; left: 0; border-bottom: green solid; font-size: .5em; font-weight: bold; } .test-top { top: 0; } .test-bottom { bottom: 0; } </style> </head> <body> <div class="columns is-multiline"> <div class="column is-9"> <div class="content"> <h3> 关于我们 </h3> <hr> <p style="font-size:120%; text-align:left"> 一些内容... </p> </div> <div class="columns is-multiline"> <p class="test test-top">开始 columns / is-multiline</p> <div class="column is-4"> <img src="https://w7.pngwing.com/pngs/715/287/png-transparent-number-1-number-1-creative-cartoon-thumbnail.png" alt="" class="image" /> </div> <div class="column is-4"> <img src="https://w7.pngwing.com/pngs/664/223/png-transparent-number-2-number-number-2-image-file-formats-text-heart-thumbnail.png" alt="" class="image" /> </div> <div class="column is-4"> <div class="container"> <img src="https://w7.pngwing.com/pngs/111/727/png-transparent-number-3-illustration-number-blue-crystal-number-three-teal-number-symbol-thumbnail.png" alt="" class="image" /> <div class="overlay"> <p class="test test-top">开始覆盖</p> <div class="text">你好世界</div> <p class="test test-bottom">结束覆盖</p> </div> </div> </div> <p class="test test-bottom">结束 columns / is-multiline</p> </div> <p style="font-size:120%; text-align:left"> 一些文本... <ul> <li> 项目1 <a href="url1"> <b>链接</b> </a> </li> <li> 项目2 <a href="url2"> <b>链接</b></a> </li> </ul> </p> </div> <div class="column is-3"> {% include latest-posts.html %} </div> </div> <hr> </body> </html>