html - 将图像居中放置在旋转 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%;
}