Question

您可以在此处查看我要尝试实施的内容：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渐变实现，但是在图像中不仅有条纹效果，而且还有一个渐变。

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

谢谢！

Answer 1

使用多个彼此叠加的CSS Gradients可以实现这一点。

我已将此设置为正文，但几乎可用于任何元素。

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

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

CSS维护文本上对角线背景图像的形状/大小

1 个答案: