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%;
}

将图像置于旋转45度（或钻石形状背景）css的正方形上

1 个答案: