时间戳

首页 > 解决方案 > 如何旋转背景并切出超出设备宽度的部分？

html - 如何旋转背景并切出超出设备宽度的部分？

问题描述

所以基本上我想在移动设备上有一个旋转的背景。我试过使用

transform: rotate(15deg);

但是每当我这样做时，身体的宽度就会变大，我尝试过使用类似的东西

overflow: hidden;

但这没有用。所以我想知道如何旋转我的背景/背景颜色。

具有不同部分的旋转背景

标签： htmlcssrotationcss-transforms

解决方案

如果您使用此 CSS，它将自动调整查看器的背景以适合他们的屏幕（响应式）

<style>
body {
  background-image: url("example.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */      
  background-attachment: fixed; /* makes the background position fixed */
}
</style>
<html>
<body>
<!-- put your html here !-->
</body>
</html>

我想这比旋转背景要好，但如果你真的想旋转背景，你可以使用我认为这样的东西。

<style>
body {
  background-image: url("example.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */      
  background-attachment: fixed; /* makes the background position fixed */
  transform: rotate(15deg);
}
</style>
<html>
<body>
<!-- put your html here !-->
</body>
</html>

推荐阅读