Question

我正在使用HTML和CSS制作网站。我在主页上有我的背景图片。尽管我努力想弄明白，但我尝试过的任何事情都无法奏效。我试图不在主体“Body”中包含背景。为了更清楚，我将包括我一直在尝试旋转的CSS代码块，但它会旋转整个网站。

.site-wrap {

min-height: 100%;
min-width: 100%;
background-color: white;
position: relative;
top: 0;
bottom: 100%;
left: 0;
z-index: 1;


padding: 4em;
background-image: url("/Users/tjle------/Downloads/IMG_2057.JPG");
background-size: 100%;

}

这只是部分代码，但是在执行时图像会横向移动。当我试图旋转它时，它会旋转整个网站，这是不应该发生的。我应该尝试将背景与网站包装分开吗？谢谢！对不起，如果问题很难理解，请告诉我是否。

Answer 1

以下是解决方案：

HTML：

<body>
<div class="bcg"> <!-- this is your background-->
<img src="http://img.theepochtimes.com/n3/eet-content/uploads/2013/06/Canada-Goose-PhotosCom-139956551-Janet-Forjan-Freedman-676x450.jpg"/>
</div>

<!-- The rest of your page -->
</body>

CSS：

body,html{
width:100%;
height:100%;
margin:0;
}
.bcg{
  position:absolute;
  z-index:-1;
  width:100%;
  height:100%;  
  max-width:100%;
  max-height:100%;
  overflow:hidden;
}
.bcg img{
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg); //the angle of rotation
  margin:auto;
  width:100%;
  height:100%;  
  max-width:100%;
  max-height:100%;
}

这是工作小提琴：https://jsfiddle.net/vxj4u5dy/2/

但这不是完美的解决方案，所以我建议您在图像编辑程序中旋转照片，然后将其作为原始照片应用到您的网页;）

如何在不与整个网站交互的情况下旋转背景图像？

1 个答案: