배경 속성을 사용하여 요소의 배경 속성을 지정할 수 있습니다. background-color, background-image, background-repeat, background-position, background-clip, background-size, background-origin 및 background-attachment에 대한 값을 사용할 수 있습니다.
구문
CSS 배경 속성의 구문은 다음과 같습니다 -
Selector { background: /*value*/ }
예시
다음 예는 CSS 배경 속성을 보여줍니다 -
<!DOCTYPE html> <html> <head> <style> body { background: gray url("https://www.tutorialspoint.com/pytorch/images/pytorch.jpg") no-repeat; font-size: 1.2em; color: black; } h2 { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px black; } p { box-shadow: 0 0 5px 5px black; } </style> </head> <body> <h2><i>PYTORCH Tutorial</i></h2> <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p> <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> </body> </html>
출력
이것은 다음 출력을 제공합니다 -
예시
<!DOCTYPE html> <html> <head> <style> h2 { background-color: bisque; } div { margin: auto; background-color:orange; width: 40%; } </style> </head> <body> <h2>Demo Text</h2> <div>demo demo demo demo</div> </body> </html>
출력
이것은 다음 출력을 제공합니다 -