渐变背景倾斜平铺

css3如何实现这样的渐变背景?

AI BotBETA

在CSS3中，要创建一个倾斜平铺的渐变背景，你可以使用linear-gradient()函数结合background-size和background-repeat属性。但是，linear-gradient本身不支持直接设置倾斜平铺的效果，因为它通常用于定义单个渐变。不过，你可以通过调整渐变的方向和大小，并使用background-repeat来实现一种模拟的倾斜平铺效果。

以下是一个简单的例子，展示如何创建一个类似于你提供的图片中的倾斜渐变效果：

.gradient-background {
  /* 定义一个线性渐变，角度决定了倾斜的方向 */
  background-image: linear-gradient(60deg, red, yellow);
  
  /* 设置背景大小，这里假设我们想要让渐变在水平和垂直方向上重复 */
  /* 但因为我们要模拟倾斜平铺，所以我们需要将背景大小设置为非默认的 */
  /* 假设你的容器宽度是300px，高度是200px，你可能需要调整这些值 */
  background-size: 100px 50px; /* 根据需要调整 */
  
  /* 使背景重复 */
  background-repeat: repeat;
  
  /* 确保背景不会根据内容大小裁剪 */
  background-attachment: fixed;
  
  /* 根据需要设置其他样式 */
  width: 300px; /* 容器宽度 */
  height: 200px; /* 容器高度 */
}

请注意，background-size的值需要根据你的具体需求进行调整。在这个例子中，我使用了100px 50px作为示例值，但这可能并不完全适合你的设计。你可能需要根据你的容器大小以及你想要的渐变图案的密度来调整这些值。

此外，由于background-size和linear-gradient的角度是分开设置的，你可能需要通过实验来找到最佳的组合，以便渐变看起来是“倾斜平铺”的。

如果你想要更复杂的倾斜平铺效果（比如每个渐变块之间有明显的界限或者不同的颜色变化），你可能需要使用多个背景图层或者SVG/Canvas来实现。然而，对于简单的倾斜渐变，上述方法应该足够了。

2 个回答

发布于
9 月 10 日广东

✓ 已被采纳

陟上晴明

21.2k124691

发布于
9 月 10 日浙江

更新于
9 月 10 日

你这个倾斜角度，单纯用CSS渐变背景不太好做，用伪类会比较好实现。但是我觉得没有太多必要，直接用图片背景cover的形式会方便很多。

图片.png

<div class="test">
  <p>TEST TEXT</p>
</div>

<style>
.test {
     width: 100vw;
     height: 200px;
     position: relative;
     overflow: hidden;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .test p {
     font-size: 45px;
     color: #d4090b;
     font-family: sans-serif;
}
 .test:before {
     content: '';
     width: 120%;
     height: 300%;
     background: linear-gradient(to bottom, #fcd8d6 0, rgba(252,216,214,0) 100%) center/contain, 
                 linear-gradient(to right, #fec0c5 55%, #fcd8d6 0) center/100px 100%;
     display: block;
     position: absolute;
     left: 50%;
     top: 50%;
     z-index: -1;
     transform: translate(-50%, -50%) rotate(10deg);
     transform-origin: center;
}
</style>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

css3如何实现这样的渐变背景?

你尚未登录，登录后可以

纯css怎么搞出这么个圆环渐变效果呢？再进一步可以搞成圆边是虚线么？

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

浏览器可以直接解析scss文件了吗？

请问前端小票打印各位是怎么做的？

通栏banner图片，如何不变形且内容完全显示不裁剪啊？

Web PC端如何实现页面固定区域打印和批量打印？

background简写能否缺省background-position?