1
에 대각선 배경 이미지의 모양/크기를 유지 : http://jsfiddle.net/j1234cl/e8nxrnw4/CSS 당신은 내가 여기에 구현하기 위해 노력하고 무엇을 볼 수있는 텍스트
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 그래디언트를 사용하여 효과를 구현해야하는지 궁금하지만 스트라이프 효과가있을뿐만 아니라 그 안에 그래디언트가 있습니다.
어떻게 할 수 있습니까?
감사합니다.