將圖像放在一個正方形上旋轉45度（或菱形背景）css

Question

我想將圖像居中在菱形背景的中心。有沒有辦法使用CSS來做到這一點？

<div class="categories"> 
    <div class="content"> 
     <div class="options"> 
      <div class="img"> 
       <img src="images/beverages.png" alt=""> 

      </div> 
      <!-- <h2>beverages</h2> --> 
     </div> 

這裏的SCSS .....

.categories{ 
    @extend .clr; 
    .content{ 
     width:68.5%; 
     margin:0 auto; 
     .options{ 
      position:relative; 
      text-align:center; 
      margin-top:104px; 
      margin-right:23%; 
      float:left; 
      background-color:$babyblue; 
      width:169px; 
      height:169px; 
      @include rotate; 
      &:nth-child(2n){ 
       background-color:$lightyellow; 


      } 
      &:nth-child(3n){ 
       margin-right:0; 
      } 
      &:after{ 
       background-image:url("images/beverages.png"); 
      } 
     } 
     .img{ 
      //padding-top:26px; 
      position:absolute; 
      transform:rotate(-45deg); 
      h2{ 
       text-align:center; 
      } 
     } 

    } 
} 

所以基本上我有已旋轉45度，使之成爲鑽石彩色背景的方，我要居中的圖像在那顆鑽石之上。我已經看過並嘗試了幾件事情，但沒有一件看起來像我需要的那樣工作。任何建議都會有幫助。提前致謝。

Answer 1

如果我理解正確，你想做什麼，你只需要以使圖像容器.img菱形內正確居中，這裏就是你需要修改：

.categories .content .img { 
    position: absolute; 
    transform: rotate(-45deg); 
    transform-origin: 50% 50%; 
    width: 100%; 
    line-height: 169px; 
} 

此外，如果你想要的圖像正確旋轉，您應該添加：

.img img { 
    transform: rotate(45deg); 
    transform-origin: 50% 50%; 
}