渐变背景倾斜平铺
在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来实现。然而,对于简单的倾斜渐变,上述方法应该足够了。
你这个倾斜角度,单纯用CSS渐变背景不太好做,用伪类会比较好实现。但是我觉得没有太多必要,直接用图片背景cover的形式会方便很多。
<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>
2 回答6k 阅读
3 回答1.5k 阅读✓ 已解决
1 回答5.2k 阅读✓ 已解决
2 回答1.8k 阅读✓ 已解决
3 回答1.4k 阅读✓ 已解决
2 回答1.4k 阅读✓ 已解决
Codepen