CSS保持文本上对角线背景图像的形状/大小答案

【问题标题】：CSS Maintain Shape/Size of Diagonal Background Image on TextCSS保持文本上对角线背景图像的形状/大小
【发布时间】：2015-03-26 12:22:30
【问题描述】：

你可以在这里看到我想要实现的东西：http://jsfiddle.net/j1234cl/e8nxrnw4/

HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel='stylesheet' id='twentyfourteen-style-css'  href="style.css" type='text/css' media='all' />
<title>Background Image</title>
</head>

<body>

<div class="content-section">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
                </div>

</body>
</html>

CSS：

@charset "utf-8";
/* CSS Document */

.content-section {
    background: url("http://i.imgur.com/vcA64hy.png") no-repeat scroll 0% 0% / 98% 100% transparent;
    padding: 55px 30px 0px;
    margin: 10px 0px 0px;
    min-height: 230px;
}

我正在尝试在我的文本内容后面实现条纹对角线背景图像。我希望图像在右下角也被切断，但是我无法实现它，因此无论多少看起来都一样（灰线大小相同，线条之间的间隙大小相同）内容在页面上，并且图像在右下角截断的位置，截断线的角度始终相同。

我目前正在使用背景图像，但我想知道是否应该使用 CSS 渐变来实现效果，但是在图像中不仅有条纹效果，而且其中还有渐变。

关于如何做到这一点的任何提示？

谢谢！

【问题讨论】：

标签： html css css-shapes css-gradients

【解决方案1】：

这可以使用多个层叠的 CSS 渐变来实现。

我已将此设置为主体，但它几乎可以用于任何元素。

它不会扭曲设计或风格，并且会不断重复，所以应该正是您所需要的。

body {
  background:
    /* white to transparent*/
    linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%),
    /* thin line from top right */
    repeating-linear-gradient(-45deg, #ffffff, #fff 2px, #ddd 2px, #ddd 4px);
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>

【讨论】：