0

我正在 wordpress.com 中创建一个网站，我试图弄清楚如何控制图像的放置位置？目前我只能将图像放在另一个图像的下方或上方，它看起来真的很乱。有没有办法使用 html 或 CSS 来控制坐标？最好是 html，因为我想要不同图像的不同位置。

到目前为止，这是我的图像的代码：

    .container {
      position: relative;
      width: 400px;
    }
    
    .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;
    }
    
    .projeto01 {
      color: white;
      font-size: 40px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: center;
    }
    <div class="grid-portefolio">
    
    <div class="container">
    
    <a href="https://en.wikipedia.org/wiki/Main\_Page"><img src="https://insert1australia.files.wordpress.com/2021/04/real-sinister-minister-14-250x250-1-1.png" class="image" alt="Albert Lee Banks Electorate"/><div class="overlay"><div class="projeto01">Albert Lee<br>Banks Electorate</div></div></a>
    
    
    </div>

另请注意，我是编程的初学者。上面的代码是我在网上找到的模板和朋友的一些帮助的混合体。

4

3 回答 3

1

您可以使用margincss 的属性，或者我自己尝试过，并且可能有一些其他 css 代码与您的重叠，因为当我更改我的三个图像的宽度时，它们出现在一行上

编辑：@MrMcGoofy，示例代码是：

<!DOCTYPE html>
<html style="background: black;" lang="en-US"><head>
    <title>TITLE</title>
    <style>
        #one{
            /*Add the css you want, but this one wouldn't need margin*/
        }
        #two{
            margin-bottom: /*Play around with the value until you get the desired result , also try to change the margin-bottom to margin-top/left/right*/;
        }
        #three{
            margin-bottom: /*Play around with the value until you get the desired result, also try to change the margin-bottom to margin-top/left/right*/;
        }
    </style>
</head>
<body>
    <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293__340.jpg" alt="1.jpg" width="40%" id="one">
    <img src="https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706__340.jpg" alt="2.jpg" width="40%" id="two">
    <img src="https://cdn.pixabay.com/photo/2015/10/12/14/59/milky-way-984050__340.jpg" alt="3.jpg" width="40%" id="three">
</body>
</html>
于 2021-04-25T18:08:55.033 回答
1

尝试在您的图像标签位置中使用：绝对；然后使用顶部和左侧；例如给 top:50px; 左：100px；看看会发生什么，玩这个......祝你好运，你可以检查一下我来自哪里： https ://css-tricks.com/absolute-positioning-inside-relative-positioning/

于 2021-04-26T07:38:28.290 回答
1

关于大小，一切都width与height属性有关，也与位置有关。我认为这取决于您的网站布局，但您也可以使用top, right, left, bottom.

希望我对你有足够的帮助。

于 2021-04-26T07:45:25.367 回答