Question

我创建了一个HTML页面并将其链接到CSS。我在CSS文件中的背景如下：

body {
background-image:url('../Images/Bdos.jpg');
background-size:100%;
background-repeat:no-repeat;
background-attachment:fixed;
transform:rotate(90deg);
}

但是，transform:rotate(90deg)会改变HTML文件中的内容。任何想法可能是问题的原因或单独旋转图像应该做些什么??

Answer 1

这是一种方法，尝试一下，如果它仍然不起作用，请回来：

body {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 1000px;
}
body:before  {
    content: '';
    background: url('../Images/Bdos.jpg') 0 0 no-repeat;
    /*background-size: 100%;*/
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    position: absolute;
    z-index: -1;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
}

您必须使用资源，因为图像的尺寸会导致不同的结果。

Answer 2

如果您不希望内容旋转，但只想要背景图像，只需在图像编辑器中旋转图像，保存并将其用作背景图像。它＆＃39;如果不旋转内容，则无法旋转背景图像。

Answer 3

感谢所有的帮助，但我只是注意到问题不在于代码，我将使用的图像是我用相机拍摄的照片，我不确定相机的设置会引起这个问题。我在网上试了一张照片，一切都很顺利。非常感谢所有的帮助，我非常感谢。干杯！

背景图像不旋转

3 个答案: