CSS сохранить форму / размер диагонального фонового изображения на текст

Вы можете увидеть, что я пытаюсь реализовать здесь: 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-градиента, однако на изображении есть не только эффект полоски, но и градиент внутри него.

Любые советы о том, как я могу это сделать?

Спасибо!

Источник

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>

Источник
Другие вопросы по тегам